Blob numerati che si schiacciano in un cerchio · MagpUI

Animazioni

Blob numerati che si schiacciano in un cerchio

Decine di sassolini neri morbidi si spingono, si schiacciano e si riassestano dentro un cerchio e una freccia, come un'infografica viva.

Settori: creative
Colori: blackwhite
Stili: organicmonochromephysics
Categoria: generativeloop

Vedi originale

REFERENCE
- Gallery page: https://magpui.com/en/i/squishy-numbered-blobs-in-a-circle-676501
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/squishy-numbered-blobs-in-a-circle-676501/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/squishy-numbered-blobs-in-a-circle-676501/clip.mp4
- Original post: https://x.com/manwon_man/status/2109177252546318700 by @manwon_man
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 looping motion piece: many soft blobs packed inside a container shape (circle, then arrow). They push each other, squish where they touch and reflow when the container morphs.

DESIGN SYSTEM
- Background white with a soft grey vignette; blobs solid #0A0A0A with a thin white gap between them.

MOTION
- Soft-body circles via simple physics: each blob has a radius 12-34px and is pulled toward the container, separated from neighbors; contact flattens touching sides.
- Every 4s the container morphs (circle to arrow) over 1.2s cubic-bezier(0.65, 0, 0.35, 1); blobs reflow during the morph.

SECTIONS
- Container path.
- Blob field.

IMPLEMENTATION
- Canvas 2D with a metaball or Voronoi-cell renderer and a lightweight verlet solver; or a matter.js world if already in the project.
- 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
- Blobs never overlap or leave the container.
- Loop is seamless.
- Under 4ms per frame with 120 blobs.

Incolla il prompt nel tuo agente

Confronta con l'originale