Mobile badge-unlock screen with a lit hexagon trophy

Name: Mobile badge-unlock screen with a lit hexagon trophy
Uploaded: 2026-09-26T06:50:56.000Z
Duration: 11 s
Channel: Ritu
Description: A premium badge-unlock animation built to match a Figma design exactly: a gold-rimmed hexagonal badge sits on a lit podium above a row of achievement badges, set to tilt toward the cursor and celebrate with gold particles.

RituVERIFIED

@BThreeAgency

VIEW ORIGINAL ON X ↗

301 views · 10 likes · 1 saves · 1 reposts · Posted Sep 26, 2026 · 0:11 · 3d scenes

OUR NOTEA premium badge-unlock animation built to match a Figma design exactly: a gold-rimmed hexagonal badge sits on a lit podium above a row of achievement badges, set to tilt toward the cursor and celebrate with gold particles.

THE CREATOR'S POST

You must be kidding me Just one shotted this mobile app animation on @claudeai Opus 5.5 Created the screen design in Figma, shared it with Opus 5.5 and gave it a generic prompt honestly👇 "Using the linked Figma frame build a badge unlock screen. Match the design exactly. Use the file's assets, lighting, type and layout and add only the motion. Animate the badge so it feels premium and celebratory. Build its scene and then celebrate with gold particles. Treat the badge as a solid 3D object that tilts toward the cursor following the rules of physics. Keep it fast and smooth, it should not be bouncy."

THE PROMPT

Figma-matched motion spec

Using the linked Figma frame build a badge unlock screen. Match the design exactly. Use the file's assets, lighting, type and layout and add only the motion. Animate the badge so it feels premium and celebratory. Build its scene and then celebrate with gold particles. Treat the badge as a solid 3D object that tilts toward the
cursor following the rules of physics. Keep it fast and smooth, it should not be bouncy.

MAKE ONE LIKE THIS

Three steps, using what the creators in this index used.

1 · Copy the prompt
Use the prompt above as your starting point, then change the subject and the style.
HOW OTHERS WROTE THEIRS →
2 · Direct it like an editor
- Ask for one self-contained HTML file on a fixed 1920×1080 stage.
- Link this video as the reference for pacing and style.
- Send two or three rounds of specific notes.
PROMPT TEMPLATE →
3 · Render it to MP4
A short piece like this can be screen-recorded, or captured frame by frame for exact timing.
TURN AN HTML ANIMATION INTO AN MP4 →

HOW IT WAS MADE

The creator didn't name their tools. Most videos like this are HTML, canvas or SVG animation written by Claude and screen-recorded or rendered to MP4 — how that works.

LOOK

ui-mockup3dproduct-ad