Caricamento immagini in ASCII · MagpUI

Animazioni

Caricamento immagini in ASCII

Le foto prodotto si caricano come rumore ASCII rado che si infittisce in caratteri e poi diventa l'immagine vera.

Settori: e-commercefashion
Colori: blackwhitegrey
Stili: asciimonochrometechnical
Categoria: image loadereffect

REFERENCE
- Gallery page: https://magpui.com/en/i/ascii-image-loader-315ad0
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/ascii-image-loader-315ad0/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/ascii-image-loader-315ad0/clip.mp4
- Original post: https://x.com/shaah1d/status/2100923716670771546 by @shaah1d
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 image loading effect: while a product photo loads, show it as ASCII art that starts sparse and noisy, densifies into a recognizable character portrait, and then crossfades into the full photo.

DESIGN SYSTEM
- Background #0A0A0A, characters #EDEDED monospace 8px on a dot grid of faint #333.
- Character ramp: space . : - = + * # % @.

MOTION
- Stage 1 (0-400ms): random characters at 15% density flicker.
- Stage 2 (400-1100ms): density rises to 100% and characters lock to the luminance of a tiny preview (blur-up thumbnail).
- Stage 3: crossfade to the real image over 500ms once it has decoded.

SECTIONS
- Image frame.
- ASCII canvas.
- Final image.

IMPLEMENTATION
- Canvas 2D: sample a 64px preview, map luminance to the ramp; or a fragment shader with a glyph atlas for many images.
- Use the image decode promise to trigger the final stage.
- 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
- The silhouette is recognizable before the photo appears.
- Cached images skip straight to the photo.
- No layout shift: frame reserves the aspect ratio.

Incolla il prompt nel tuo agente

Confronta con l'originale