REFERENCE
- Gallery page: https://magpui.com/en/i/moonlit-glyphs-over-an-isometric-bed-a7c1d7
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/moonlit-glyphs-over-an-isometric-bed-a7c1d7/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/moonlit-glyphs-over-an-isometric-bed-a7c1d7/clip.mp4
- Original post: https://x.com/poetengineer__/status/2112743091585298550 by @poetengineer__
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 a looping decorative 3D scene: a dark isometric bed beneath a floating black rectangular window with a white crescent moon. White Japanese glyph particles pour from the moon, cascade across the mattress and spread into loose trails around the bed. Keep the camera fixed and the composition sparse and surreal.
DESIGN SYSTEM: Use a saturated blue field around #1230F5, near-black #030507 window and bed, and white #F7F7F2 glyphs. In a square 720px reference area the bed spans roughly 430px and the window is roughly 250 by 290px, elevated behind it. Render the bed with dense fine stippled outlines, a tall headboard, pillows and rumpled bedding. Give the window sharp corners, no frame or shadow. Use varied serif Japanese glyphs around 12-24px rather than UI labels. No interface chrome.
MOTION: On mount, run a continuous particle stream with a suggested 6000ms lifecycle per glyph and 25ms emission stagger. Emit below the crescent, curl downward through the window, then fan outward around and in front of the mattress. Animate position, tumble and subtle size variation with linear timing cubic-bezier(0,0,1,1); fade particles during their final 700ms using cubic-bezier(0.4,0,1,1). These timings are implementation targets, not measurements. The bed, moon, window and camera stay stationary.
SECTIONS: One scene only: blue background, black window and crescent, isometric stippled bed, white glyph stream. No text panels or buttons.
IMPLEMENTATION: Use Three.js with an orthographic camera, a glyph texture atlas and instanced billboard quads for particles. Construct a simple bed mesh and sample its surface for the stippled treatment; do not depend on a copied image. Update particle trajectories in a single animation loop. Cap visible glyphs at 500, cap pixel ratio at 1.5 and pause offscreen. Use a frozen representative composition for prefers-reduced-motion. Treat the canvas as decorative with an accessible text description; any optional pause control must be keyboard operable with visible focus.
ADAPT TO THE PROJECT: Reuse existing design tokens, components and fonts, mapping the colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use placeholders and original procedural geometry.
SUCCESS CHECK:
- A fixed isometric bed sits below a black window and white crescent on a blue field.
- Glyphs visibly travel from the moon across the bed and outward, rather than falling as a flat screen overlay.
- The loop stays bounded and stops moving under reduced-motion preferences.
