REFERENCE
- Gallery page: https://magpui.com/en/i/infinite-feed-coils-into-a-spool-094e69
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/infinite-feed-coils-into-a-spool-094e69/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/infinite-feed-coils-into-a-spool-094e69/clip.mp4
- Original post: https://x.com/apostraphi/status/2114914886689935683 by @apostraphi
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: Create a looping 3D animation of an endless feed of page cards bending into a tightly rolled spool. Only build this isolated motion study on a near-black background.
DESIGN SYSTEM: Center a vertically oriented ribbon in a portrait viewport. Its width is approximately 40% of the scene width, with a large cylindrical coil at the top right and an S-shaped tail descending toward the lower left. Use pale lavender #d2c7df page edges, muted blue and green placeholder thumbnails and a #071007 background. Give each card a narrow border and visible stacked thickness. Add restrained fine grain and sparkling points on the ribbon surface.
MOTION: Animate thumbnail cards traveling continuously along the curved ribbon toward the coil. Suggested reconstruction values: 8000ms linear repeating travel, 12000ms slow coil rotation and 1200ms low-amplitude grain shimmer. Keep the camera fixed and preserve the ribbon silhouette; avoid abrupt loop boundaries.
SECTIONS: Background, curved card ribbon, tightly layered spool, subtle particle overlay. This is a continuous ambient loop with no invented navigation or controls.
IMPLEMENTATION: Use Three.js with instanced card planes sampled along a spline. Transport orientation smoothly along the curve and use several concentric layered turns for the coil. Use generated placeholder card textures, not copied screenshots. Limit to 150 visible cards and 1000 particles, cap device pixel ratio at 1.5 and pause when hidden. Reduced motion shows a still representative frame. Keep canvas decorative with an accessible text description and do not capture keyboard input.
ADAPT TO THE PROJECT: Reuse existing fonts, tokens and components. Map colors to the closest project tokens. Never copy logos, brand names, photos or illustrations; generate placeholder page textures.
SUCCESS CHECK:
- Cards follow the curved ribbon without flipping or gaps.
- The spool retains visible layered edges throughout the loop.
- Reduced-motion mode displays a stable still frame.
