Portfolio con carosello circolare 3D · MagpUI

Animazioni

Portfolio con carosello circolare 3D

Foto desaturate fluttuano in un anello nello spazio 3D e ruotano con scroll e trascinamento: una homepage sperimentale da sviluppatore.

Settori: creative developer
Colori: blackgreywhite
Stili: 3dmonochromeexperimental
Categoria: portfoliocarousel

Vedi originale

REFERENCE
- Gallery page: https://magpui.com/en/i/circular-3d-photo-carousel-portfolio-b56201
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/circular-3d-photo-carousel-portfolio-b56201/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/circular-3d-photo-carousel-portfolio-b56201/clip.mp4
- Original post: https://x.com/Andrianja_tony/status/2095223517495111818 by @Andrianja_tony
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.
- Project photos: Desaturated moody editorial photo of a minimal design object or interior detail, soft natural light, grain, muted grey tones, square 1:1. Make 12 variations of different objects.

BUILD
A dark portfolio homepage where project photos are arranged in a ring in 3D space. Scroll or drag rotates the ring; hovering a card brings it forward; clicking opens the project.

DESIGN SYSTEM
- Background #050505; cards 120x90, desaturated, slight random tilt; small white nav text 11px in corners.

MOTION
- Ring rotation from scroll delta with inertia (damping 0.92).
- Cards always face the camera (billboard) with a slight wobble.
- Hover: card moves toward the camera 40px and regains color, 300ms.

SECTIONS
- Corner nav.
- 3D ring of cards.

IMPLEMENTATION
- R3F with instanced planes and textures; or CSS 3D transforms for up to 20 cards.
- prefers-reduced-motion: skip the animation and show the end state.

ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.

SUCCESS CHECK
- Rotation feels smooth with trackpad and wheel.
- Cards are focusable links (fallback list for keyboard).
- Loads fast: textures are small.

Crea le immagini

Incolla il prompt nel tuo agente

Confronta con l'originale