REFERENCE
- Gallery page: https://magpui.com/en/i/sumi-e-scroll-portfolio-3818ba
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sumi-e-scroll-portfolio-3818ba/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/sumi-e-scroll-portfolio-3818ba/clip.mp4
- Original post: https://x.com/Framer_Core/status/2117564619455877520 by @Framer_Core
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.
- Chibi character: Original chibi character with spiky white hair, big expressive eyes and an open happy mouth, wearing a green patterned kimono, drawn in Japanese sumi-e ink line style with soft watercolor blush, waving one hand, transparent background, 1:1.
- Ink pine and cranes: Japanese sumi-e ink wash painting of a pine branch with three flying cranes, black and gray ink on cream paper, loose brush strokes, lots of empty space, transparent or plain cream background, 3:4.
BUILD: A personal portfolio presented as a Japanese hand scroll (emakimono). It opens with a loader: a percentage counter in a brushy display font on two dark-red lacquered rollers that then part and roll open to reveal a cream paper sheet. The site then scrolls sideways (vertical wheel mapped to horizontal travel) across ink-wash scenes: a hero with a chibi character who waves, a bold brush-lettered name and role, two pill CTAs, a vertical 'TECHSTACK' title beside ink pine branches and flying cranes, and tools shown as small red seal stamps scattered in an arc. It should feel handmade, calm and a little playful.
DESIGN SYSTEM: The scroll sits centered on a sky background (#1E63C8 to #9EC6F0 with soft white clouds), about 92% of viewport width, aspect about 16:9, with a 2px #2A1A12 outer edge and a soft drop shadow 0 20px 40px rgba(0,0,0,0.25). Paper: cream #F6F1DC with faint fiber texture and a 12px darker border band #E9DFC0 top and bottom with a thin ink rule. Rollers: 36px wide vertical cylinders on the left edge, crimson lacquer #8E1B1B to #5A0F0F with vertical highlight stripes and gold end caps #C9A24A. Type: a brush-script display face for names and titles (32-40px, ink #1A1A1A, slightly rough edges), small caps sans 9-10px for nav and labels, vertical Japanese text columns 10px #3A3A3A as decoration. CTAs: pill buttons 26px tall, the primary filled #9C1C1C with cream 10px text, the secondary outlined 1px #9C1C1C, radius 999px. Accents: a red sun disc #B3261E behind the character, ink cranes and pines as black-to-gray wash. Stamps: 28px rounded squares #A21F1F with cream line icons, slight rotation -6 to 6 degrees.
MOTION: Loader: counter counts 0 to 100 over 1800ms with ease-out cubic-bezier(0.16,1,0.3,1); at 100 the two rollers slide apart from the center to the left and right edges over 1100ms cubic-bezier(0.65,0,0.35,1) while the paper unrolls (clip-path inset from 50% to 0) and small ink waves at the bottom fade in. Hero: character pops in with a 300ms scale 0.9 to 1 and starts an idle loop (blink, wave); name and role write on with a brush mask reveal 700ms, stagger 120ms. Horizontal scroll: wheel and trackpad drive translateX of the scene track with a lerp of 0.08 for inertia; the left roller stays fixed and the right edge content parallaxes at 0.85. Cranes fly across with a 6s loop. Techstack: on entering view each stamp drops from scale 1.4 to 1 with a 6 degree rotate and a 160ms ink splash, stagger 70ms along an arc. Nav links and CTAs: hover lifts 1px and fills with crimson over 150ms.
SECTIONS: 1. Loader with counter on closed rollers. 2. Scroll unroll reveal. 3. Hero: character in front of the red sun, brush name and role, short line, two CTAs, top-right nav (About me, Resume, Case studies) and a small seal mark. 4. Vertical 'TECHSTACK' title with pine and cranes. 5. Tool stamps arranged in an arc with a short brush caption. 6. Case study panels as framed ink paintings with titles (continue the horizontal track). 7. Closing panel with contact and the scroll's end roller.
IMPLEMENTATION: Plain HTML/CSS with GSAP and ScrollTrigger (horizontal pin with scrub) or a lerped custom wheel handler; character as a Rive file with an idle and a hover-wave state machine. Ink illustrations as layered transparent PNG or WebP. Keyboard: arrow keys and Page Down move the track by one panel; all CTAs and nav are focusable with a visible 2px crimson focus ring. prefers-reduced-motion: skip the unroll and lerp, show the open scroll with normal vertical sections and static stamps. Mobile: switch to vertical stacking of the panels. Keep images under 300KB each and lazy-load later panels.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts where possible; map the colors above to the closest existing tokens. Never copy the original's name, character, illustrations or copy: generate your own artwork and use placeholder text.
SUCCESS CHECK:
- The loader counts to 100 and the rollers part to reveal the paper.
- Scrolling the wheel moves the scene horizontally with gentle inertia and the tool stamps drop in when they enter view.
- With reduced motion the content is fully readable as a static, vertically stacked page.
