REFERENCE
- Gallery page: https://magpui.com/en/i/activity-grid-that-stands-up-in-3d-2c8739
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/activity-grid-that-stands-up-in-3d-2c8739/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/activity-grid-that-stands-up-in-3d-2c8739/clip.mp4
- Original post: https://x.com/MarceloDesignX/status/2110741031285109012 by @MarceloDesignX
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
An activity card showing a year as a flat grid of green squares (like a contribution graph) with summary stats above. Toggling to 3D, the grid tilts into an isometric view and every square rises into a bar whose height is the day's count; peak days turn red.
DESIGN SYSTEM
- Page #EDEDED; card white, radius 12px, shadow 0 10px 30px rgba(0,0,0,.08).
- Squares 9px, gap 2px, 4 greens #D6F0DD to #1F8A4C; peak bars #D64545.
- Total 22px semibold, four small stats 11px; segmented toggle 'Flat / 3D' black pill.
MOTION
- Toggle to 3D: the grid rotates to rotateX 55deg rotateZ -35deg over 700ms cubic-bezier(0.65, 0, 0.35, 1); then bars grow from 0 to height with a 4ms per-column stagger, 500ms ease-out.
- Back to flat: bars sink first, then the grid flattens.
- Hover a bar: it brightens and a tooltip shows date and count.
SECTIONS
- Header stats, grid/bars, month labels, legend, toggle.
- States: flat, rising, 3D, hover.
IMPLEMENTATION
- CSS 3D: each cell a small box (top face + two side faces) with height as a CSS variable; or Three.js InstancedMesh for 365 bars if performance needs it.
- prefers-reduced-motion: swap the motion for a 150ms opacity change.
- Keyboard: every control focusable with a visible focus ring; same actions with Enter/Space and arrow keys where it makes sense.
- Animate only transform, opacity and filter.
ADAPT TO THE PROJECT
Reuse the project's existing design tokens, components and fonts; map colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original: use placeholders.
SUCCESS CHECK
- The 3D view keeps the same days as the flat grid.
- Bars rise in a wave, not all at once.
- Hover/focus on a day shows its count.
