REFERENCE
- Gallery page: https://magpui.com/en/i/indigo-portfolio-you-enter-with-a-stamp-03eebf
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/indigo-portfolio-you-enter-with-a-stamp-03eebf/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/indigo-portfolio-you-enter-with-a-stamp-03eebf/clip.mp4
- Original post: https://x.com/ikonic_gupta/status/2117501483528937484 by @ikonic_gupta
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
ASSETS
This needs real artwork, not shapes drawn in code. Use the files the user gives you (ask where they are). If you have an image generation tool, generate them with these prompts; otherwise leave clearly marked placeholders.
- wooden block stamp: Top-down photo of a small square wooden rubber stamp block, warm light wood with visible grain, a carved four-petal flower inked in deep indigo on top, soft studio lighting, transparent background, 1:1
BUILD
A calm, single-colour personal portfolio for a visual designer. Instead of a splash screen, the visitor sees a small entry card that looks like a passport or library slip, and enters the site by dragging a wooden block stamp onto it and pressing it: the stamp leaves an indigo flower mark and the card fades away to reveal the work. Projects appear as tall cards that print in like cyanotype photos, developing in indigo from top to bottom. Small stamps are hidden around the site as collectibles. It should feel tactile, quiet and crafted, like paper and ink, not like a tech site.
DESIGN SYSTEM
- Background #FFFFFF with a very faint cool tint near content (#F6F8FC). Everything else is one hue: indigo #2F4BA8 (ink), mid #6F86D6, pale wash #DCE4F6, paper #EEF2FA.
- Typography: a light, high-contrast serif for statements (32-40px, line-height 1.2, ink colour, second sentence at 35% opacity until revealed) and a small neutral sans for labels (11-12px, #333 for titles, #999 for meta on the right).
- Entry card: about 280x400px centered, paper #EEF2FA, a 10px border made of repeating small indigo diamond/flower glyphs, serif heading 'Enter' 28px top-left at 24px padding, two hairlines below it (1px #C9D3EC), and a dashed 80x80px 'Stamp here' box bottom-left with 8px label text. Soft shadow 0 8px 24px rgba(47,75,168,0.08).
- Stamp: 64x64px rounded square (radius 6px) with a warm wood texture (#B07A44 to #8A5A2E with grain), a carved four-petal indigo flower on top, shadow 0 6px 12px rgba(0,0,0,0.25) when lifted, 0 1px 2px when pressed.
- Project grid: 3 columns on desktop, 24px gaps, cards with a 3:4 ratio, edges slightly rough like a printed sheet (use an SVG mask with a small noise displacement), below each card a 12px row with the project name left and the client right.
MOTION
- Statement reveal on load: words fade from 0.35 to 1 opacity in sequence, 40ms stagger, 400ms each, cubic-bezier(0.22,1,0.36,1).
- Stamp drag: the stamp follows the pointer with a light spring (stiffness 300, damping 26), scales to 1.06 and rotates up to 4deg in the drag direction.
- Press: on release over the dashed box, the stamp snaps to its center (180ms, cubic-bezier(0.34,1.56,0.64,1)), scales 1.06 -> 0.94 -> 1 (220ms), and the indigo flower mark appears under it with a slight ink spread (scale 0.9 -> 1, blur 2px -> 0, 260ms). The stamp then lifts away to the bottom-right (300ms) leaving the mark.
- Exit: 500ms later, the whole card and stamp fade to 0 and lighten (opacity and saturate, 600ms, cubic-bezier(0.4,0,0.2,1)) and the portfolio fades in.
- Card print-in: each project card develops like a print: a horizontal indigo bar sweeps from top to bottom (900ms, cubic-bezier(0.65,0,0.35,1)) and the image is revealed above it with a clip-path inset from the bottom; cards stagger by 250ms left to right. The image itself is shown as a duotone (indigo shadows, pale highlights).
- Hidden stamps: hovering a hidden stamp spot shows a tiny wobble (rotate -3deg to 3deg, 300ms); clicking collects it into a small counter tray in a corner with a fly-to animation (500ms).
SECTIONS
1. Entry overlay: the stamp card, centered, nothing else on screen. Keyboard: Enter or Space presses the stamp into place.
2. Intro: one serif statement in two lines top-left with generous left margin (about 1/12 of the width).
3. Work grid: three cyanotype project cards with name and meta below, more rows on scroll, each row printing in when it enters the viewport.
4. Collectible stamps scattered in margins and the footer, plus a tray that shows how many were found.
5. Footer: contact link and socials in the small sans.
IMPLEMENTATION
React with Motion (Framer Motion) for drag, springs and stagger; CSS clip-path and an SVG duotone filter (feColorMatrix plus feComponentTransfer) for the cyanotype look, or a tiny fragment shader if many images are shown. Use IntersectionObserver for row reveals. Store found stamps in localStorage. prefers-reduced-motion: skip the drag, show a single 'Enter' button that places the mark instantly, and show cards without the sweep. Keep the stamp draggable with pointer events and fully operable with keyboard, with a visible 2px indigo focus ring. Lazy-load project images and keep the filter on images under 1600px.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map the indigo palette to the closest existing tokens or add one accent ramp. Never copy logos, names, photos or illustrations from the original; use placeholder images run through the duotone filter and a generic flower glyph for the stamp.
SUCCESS CHECK
- Dragging the stamp onto the dashed box and releasing leaves an indigo mark, then the entry card fades and the portfolio appears; Enter does the same from the keyboard.
- Project cards develop top to bottom in indigo with a 250ms stagger the first time each row enters the viewport.
- With prefers-reduced-motion on, the site is enterable with one click and nothing sweeps or springs.
