Skip to content

About

Standalone HTML widget for building portfolio grids — circle, diamond, 3×3 square, shards. Exports PNG, SVG, HTML.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Latest commit

 

History

12 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

Header

A standalone HTML widget for building portfolio grids: circle, diamond, 3×3 square, or shards. Exports to PNG, SVG, and HTML.

Latest Release License: MIT HTML5 JavaScript

Live Demo


✨ What is it?

RECAP Builder is a single-file HTML tool for creating beautiful portfolio recaps. Drop in your images, pick a shape, tweak the sliders — and export a ready-to-use widget for your website.

No installation. No build step. No dependencies. Just open the file in a browser.


🎨 Features

  • 4 shapes — Circle, Diamond (polygon), Square 3×3, Shards (Voronoi)
  • Drag & drop images directly onto tiles, or bulk upload
  • Per-tile control — pan, zoom, replace, reorder
  • 3D tilt on hover with adjustable depth
  • Curved text along the ring (single line or top/bottom split)
  • 8 fonts, adjustable size, spacing, radius, color, and text band
  • Random sizes mode for organic layouts
  • Crop-on-load with 9 anchor positions
  • Undo / Redo — up to 20 steps
  • Multi-language UI — 8 languages (RU, EN, ES, DE, JA, ZH, FR, PT)
  • Export to PNG (2000×2000, transparent), SVG (vector), HTML (standalone widget)
  • HTML export includes optional JPEG compression + live weight counter
  • Embed code generator for <iframe> integration

🚀 Usage

  1. Download recap.html
  2. Open it in any modern browser (Chrome, Firefox, Safari, Edge)
  3. Load your images:
    • Click a tile to upload one image
    • Drag & drop files from your file manager
    • Or use Upload works for bulk loading
  4. Choose a shape, adjust the sliders, add text
  5. Click Preview to see the final result
  6. Export as PNG, SVG, or HTML

That's it. The file works completely offline — no server, no internet required.


📦 Export formats

Format Description
PNG 2000×2000, transparent background — perfect for social media
SVG Vector — scales infinitely, editable in Illustrator/Figma
HTML Fully standalone widget — one file, all images embedded as base64

The HTML export has a built-in compression setting:

  • Original images: keep as-is
  • Compressed: resize to max side (600–4000 px) + JPEG quality (50–95%)
  • Live weight counter shows you the result before downloading

🖼️ Screenshots

RECAP Builder preview


🛠️ Tech

Pure vanilla HTML + CSS + JavaScript. No frameworks, no bundlers, no dependencies. Google Fonts loaded from CDN (optional — works offline with system fonts).


📜 License

MIT © 2026 FNK3D

Free to use, modify, and distribute. See LICENSE for details.


🔗 Links

About

Standalone HTML widget for building portfolio grids — circle, diamond, 3×3 square, shards. Exports PNG, SVG, HTML.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages