REFERENCE
- Gallery page: https://magpui.com/en/i/crumpled-paper-changelog-e23c35
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/crumpled-paper-changelog-e23c35/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/crumpled-paper-changelog-e23c35/clip.mp4
- Original post: https://x.com/ann_nnng/status/2112494977637126157 by @ann_nnng
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.
BUILD: Build an interactive changelog viewer with a single brightly colored release-note sheet suspended on a white stage. Changing the selected timeline entry crumples the sheet into a small faceted paper ball before revealing another sheet. Keep the editorial heading and timeline as accessible HTML.
DESIGN SYSTEM: Use a white #FFFFFF field, black #171717 type, a compact two-line serif heading at the upper left, and a centered portrait paper approximately 240 by 340px on a 900px-wide stage. Give the paper uneven edges, fine grain, visible creases, black brush-like headline lettering around 44px, secondary text around 22px and tiny body copy. Alternate estimated lime #CEFF39, cobalt #514CFF, orange #F36A30 and violet #9B40F0 papers. Cast a soft gray shadow beneath and to the right. Below the stage, use a small black date/status capsule, a short release summary, and a thin horizontal ruler of closely spaced ticks with a circular active handle. Leave generous whitespace around the paper.
MOTION: On timeline selection, interpolate a subdivided paper mesh from its flat state into an irregular compact ball about 80px across, rotating slightly and increasing crease shading over an estimated 850ms with cubic-bezier(0.65,0,0.35,1). Replace its content while compact, then expand the next sheet over 950ms using cubic-bezier(0.22,1,0.36,1). These timings are rebuild targets rather than measured footage. Let intermediate deformation retain folded corners and uneven lobes rather than shrinking a flat rectangle. Update the ruler handle and text with the selected entry.
SECTIONS: Component parts: editorial heading, paper stage, date and status capsule, release summary, tick-mark timeline with draggable circular handle, and a small play-all control. States: flat active sheet, partially folded sheet, compact ball, next expanded entry, paused playback.
IMPLEMENTATION: Use Three.js with a subdivided plane and deterministic vertex morph targets for the crumple; procedural noise and crease shading can supply the paper surface without image assets. Render one paper mesh with a lightweight shadow plane; cap pixel ratio at 2 and pause rendering when idle or offscreen. Keep timeline semantics in HTML with arrow-key navigation and visible focus rings, exposing the active release to screen readers. Under prefers-reduced-motion swap entries with a short opacity fade and no mesh deformation.
ADAPT TO THE PROJECT: Reuse existing project tokens, components and fonts; map these estimated colors to the closest tokens. Never copy original logos, brand names, photos or illustrations; use placeholder release notes and original procedural paper graphics.
SUCCESS CHECK:
- Every entry can be selected by mouse, touch and keyboard, with matching date and text.
- Paper visibly folds into a dimensional irregular ball rather than merely scaling down.
- Reduced-motion mode shows readable release notes without deformation and idle rendering stops.
