Prisma che rifrange un arcobaleno · MagpUI

Animazioni

Prisma che rifrange un arcobaleno

Un triangolo di vetro luminoso divide un fascio di luce in uno spettro vivido sul nero: un loop di brand che sembra ottica vera.

Settori: developer tools
Colori: blackwhiterainbow
Stili: prismaticdarkglow
Categoria: brand motionshader

Vedi originale

REFERENCE
- Gallery page: https://magpui.com/en/i/prism-refracting-a-rainbow-83ba49
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/prism-refracting-a-rainbow-83ba49/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/prism-refracting-a-rainbow-83ba49/clip.mp4
- Original post: https://x.com/JohnPhamous/status/2103612761922228669 by @JohnPhamous
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
A brand loop: a white light beam enters an outlined glass triangle from the left and exits as a fanning rainbow spectrum to the right, with bloom, film grain and slow breathing intensity.

DESIGN SYSTEM
- Background #000; triangle 2px white outline with inner glass gradient; spectrum red to violet with additive blending.

MOTION
- Beam intensity pulses 0.8 to 1.1 over 4s.
- Spectrum fan angle widens 2deg and shimmers with noise.
- Optional: the beam follows the pointer angle within ±10deg.

SECTIONS
- Full canvas.

IMPLEMENTATION
- Fragment shader: beams as soft lines with gaussian falloff, spectrum by mapping angle to hue; add bloom and grain in a final pass.
- 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
- Colors stay saturated, not washed out.
- Triangle edges remain crisp.
- Under 2ms GPU per frame.

Incolla il prompt nel tuo agente

Confronta con l'originale