00 Star Button
Original
Clone
{"component_name":"StarButton","container":{"height":"48px","border_radius":"14px","background":"#FFFFFF","box_shadow":"0px 8px 20px -4px rgba(0,0,0,0.08)"},"animations":[{"name":"icon_spin","duration_ms":3000,"easing":"linear"},{"name":"counter_roll","duration_ms":300,"easing":"cubic-bezier(0.34, 1.56, 0.64, 1)"},{"name":"background_flash","keyframes":{"30%":"#FFF8D1"},"duration_ms":450}],"colors":{"flash":"#FFF8D1","particle":"#FFD040","star_gradient":["#FFE566","#FFB800"]}}You are a senior motion designer reverse-engineering a UI micro-interaction for EXACT 1:1 recreation. Extract EVERY detail: - Container: dimensions, border-radius, background color (hex), box-shadow - Typography: font-family, sizes, weights, colors per state - Colors: exact hex codes for all states - Animations: property, start→end values, duration (ms), easing (cubic-bezier) - State transitions: what changes between default/hover/active Output as JSON with component_name, container, elements, animations, colors, implementation_notes.
01 3D Card Deck Shuffle
Original
Clone
25
The Future of UI Animation
WebGL Best Practices
AI Transforms Design
{"component_name":"IsometricCardStackShuffle","description":"Depth-based carousel with spring physics and shadow morphing","container":{"background":"#F2F4F8 with 1px dot grid pattern","perspective":"1000px"},"delight_details":{"shadow_morphing":"Shadows change blur radius (10px→40px) as cards move forward","overshoot":"Card coming to front scales to 1.02 before settling at 1.0","anticipation":"Top card moves up/right first before tucking behind","brightness_filter":"Back cards: 95% and 90% brightness for depth"},"animations":[{"name":"shuffle_top_to_back","duration_ms":450,"easing":"cubic-bezier(0.34, 1.56, 0.64, 1)"},{"name":"badge_float","duration_ms":2000,"easing":"ease-in-out"}]}You are a senior motion designer reverse-engineering a UI micro-interaction for EXACT 1:1 recreation. ## VISUAL SPECIFICATIONS - Container: dimensions, border-radius, background (hex), box-shadow - Typography: font-family, sizes, weights, colors per state - Colors: exact hex codes for all states ## ANIMATION SPECIFICATIONS For EACH animated property: - Property, start→end values, duration (ms), easing (cubic-bezier) ## DELIGHT DETAILS (critical for premium feel) - Ring/border animations (SVG stroke-dasharray) - Pulse & glow effects - Text effects (shimmer, blur-to-sharp, scramble) - Overshoot/bounce, elastic effects - Particles, confetti, sparkles CHECKLIST for each state: [ ] Background change? [ ] Border/ring animation? [ ] Glow/shadow? [ ] Scale/rotation? [ ] Text effect? [ ] Particles? Output as JSON with container, elements, animations, interaction_flow.
02 Particle Burst Tags
Original
Clone
{"component_name":"JoyfulInterestChip","description":"Pill-shaped toggle with 3D emoji particle explosion","container":{"height":"44px","border_radius":"22px","background":"#FFFFFF","box_shadow":"0px 2px 6px rgba(0,0,0,0.06)"},"delight_details":{"press_animation":"Scale to 0.96 on mousedown before release","particle_physics":"3-5 particles with random rotation (-60 to 60deg), scale overshoot (1.5x-1.8x)","category_colors":{"kites":"#E5F1FF bg / #007AFF text","desserts":"#FFF5E5 bg / #FF9500 text"}},"animations":[{"name":"chip_press","duration_ms":100,"to":"scale(0.96)"},{"name":"particle_explosion","duration_ms":700,"easing":"cubic-bezier(0.175, 0.885, 0.32, 1.275)"}],"implementation_notes":["Particles need z-index higher than UI to float above","Use 3D rendered emoji style for particles"]}You are a senior motion designer reverse-engineering a UI micro-interaction for EXACT 1:1 recreation. ## VISUAL SPECIFICATIONS - Container: dimensions, border-radius, background (hex), box-shadow - Typography: font-family, sizes, weights, colors per state - Colors: exact hex codes for all states ## ANIMATION SPECIFICATIONS For EACH animated property: - Property, start→end values, duration (ms), easing (cubic-bezier) ## DELIGHT DETAILS (critical for premium feel) - Ring/border animations (SVG stroke-dasharray) - Pulse & glow effects - Text effects (shimmer, blur-to-sharp, scramble) - Overshoot/bounce, elastic effects - Particles, confetti, sparkles CHECKLIST for each state: [ ] Background change? [ ] Border/ring animation? [ ] Glow/shadow? [ ] Scale/rotation? [ ] Text effect? [ ] Particles? Output as JSON with container, elements, animations, interaction_flow.
03 Card Number Reveal
Original
Clone
4485
xxxx
xxxx
7516
{"component_name":"SecureCardRevealer","description":"A secure data reveal with decrypting text scramble and elastic button transitions","container":{"width":"340px","height":"56px","border_radius":"12px"},"animations":[{"name":"text_decrypt","effect":"scramble random digits before settling","duration_ms":600},{"name":"button_swap","from":"scale(1)","to":"scale(0) then new button scale(0)->scale(1.1)->scale(1)","easing":"cubic-bezier(0.34, 1.56, 0.64, 1)"},{"name":"ring_draw","property":"stroke-dashoffset","from":"138","to":"0","duration_ms":500}],"delight_details":["Icons overshoot scale (0.5 -> 1.1 -> 1) for bouncy feel","Button press scales to 0.9 before action","Ring draws around button on success","Text scrambles through random digits before revealing"]}You are a senior motion designer reverse-engineering a UI micro-interaction for EXACT 1:1 recreation. ## VISUAL SPECIFICATIONS - Container: dimensions, border-radius, background (hex), box-shadow - Typography: font-family, sizes, weights, colors per state - Colors: exact hex codes for all states ## ANIMATION SPECIFICATIONS For EACH animated property: - Property, start→end values, duration (ms), easing (cubic-bezier) ## DELIGHT DETAILS (critical for premium feel) - Ring/border animations (SVG stroke-dasharray) - Pulse & glow effects - Text effects (shimmer, blur-to-sharp, scramble) - Overshoot/bounce, elastic effects - Particles, confetti, sparkles CHECKLIST for each state: [ ] Background change? [ ] Border/ring animation? [ ] Glow/shadow? [ ] Scale/rotation? [ ] Text effect? [ ] Particles? Output as JSON with container, elements, animations, interaction_flow.
04 AI Status Toast
Original
Clone
Read app-sidebar.tsx 219 lines
Thinking
{"component_name":"AI_Status_Indicator_Toast","description":"Dynamic island-style status indicator with voxel icon animations","container":{"width":"340px","border_radius":"0 0 16px 16px","background":"#09090b"},"colors":{"text_primary":"#fafafa","text_secondary":"#71717a"},"animations":[{"name":"icon_spin","duration_ms":2000,"easing":"linear"},{"name":"text_slide","duration_ms":300,"easing":"cubic-bezier(0.2, 0, 0.2, 1)"}],"interaction_flow":[{"state":"Thinking","icon":"🧊","text":"Thinking"},{"state":"Reading","icon":"📁","text":"Reading file"},{"state":"Creating","icon":"✨","text":"Creating prototype"}],"implementation_notes":["Top-docked (border-radius only on bottom)","Voxel icons are key to the retro-futuristic feel"]}You are a senior motion designer reverse-engineering a UI micro-interaction for EXACT 1:1 recreation. ## VISUAL SPECIFICATIONS - Container: dimensions, border-radius, background (hex), box-shadow - Typography: font-family, sizes, weights, colors per state - Colors: exact hex codes for all states ## ANIMATION SPECIFICATIONS For EACH animated property: - Property, start→end values, duration (ms), easing (cubic-bezier) ## DELIGHT DETAILS (critical for premium feel) - Ring/border animations (SVG stroke-dasharray) - Pulse & glow effects - Text effects (shimmer, blur-to-sharp, scramble) - Overshoot/bounce, elastic effects - Particles, confetti, sparkles CHECKLIST for each state: [ ] Background change? [ ] Border/ring animation? [ ] Glow/shadow? [ ] Scale/rotation? [ ] Text effect? [ ] Particles? Output as JSON with container, elements, animations, interaction_flow.
05 Triage Card Stack
Original
Clone
Swipe up to block
Swipe left for human conversations
Swipe right for reads
Figma
notifications@figma.com
Someone commented on your design file "Dashboard v2"...
Linear
updates@linear.app
Issue LIN-421 was assigned to you by Sarah...
Vercel
ship@vercel.com
Your deployment to production is complete...
{"component_name":"SwipeCardInbox","description":"Mobile triage for categorizing emails by swiping left (conversations), right (reads), or up (block)","container":{"width":"340px","perspective":"1000px"},"delight_details":{"instruction_pills":"Highlight blue (#E6F0FF/#007AFF) when swiping in that direction","card_depth":"Stack with 20px offset, 0.98 scale, 0.8 opacity per level","pivot_rotation":"transform-origin: 50% 100% for bottom-center rotation","swipe_physics":"10deg rotation on horizontal swipes, straight up for block"},"animations":[{"name":"swipe","duration_ms":300,"easing":"ease-out"},{"name":"card_advance","duration_ms":250,"delay_ms":150,"easing":"ease-out"}]}You are a senior motion designer reverse-engineering a UI micro-interaction for EXACT 1:1 recreation. ## VISUAL SPECIFICATIONS - Container: dimensions, border-radius, background (hex), box-shadow - Typography: font-family, sizes, weights, colors per state - Colors: exact hex codes for all states ## ANIMATION SPECIFICATIONS For EACH animated property: - Property, start→end values, duration (ms), easing (cubic-bezier) ## DELIGHT DETAILS (critical for premium feel) - Ring/border animations (SVG stroke-dasharray) - Pulse & glow effects - Text effects (shimmer, blur-to-sharp, scramble) - Overshoot/bounce, elastic effects - Particles, confetti, sparkles CHECKLIST for each state: [ ] Background change? [ ] Border/ring animation? [ ] Glow/shadow? [ ] Scale/rotation? [ ] Text effect? [ ] Particles? Output as JSON with container, elements, animations, interaction_flow.