Design inspiration curated from X

icon transition - svg - dashed line is a horizontal line with 3 poi... - JohnPhamous

Published by JohnPhamous on October 6, 2025.

icon transition - svg - dashed line is a horizontal line with 3 points - animate to check by animating 3 points

Design notes

icon transition - svg - dashed line is a horizontal line with 3 points - animate to check by animating 3 points

This entry is part of MotionVault's curated archive of interface, product, brand, website, and motion design references from public creators on X.

Image rights and licensing remain with JohnPhamous; use the original X post for source and licensing inquiries.

Deep Clone · React 19 + Framer Motion

Interactive Sandbox & Production Code

Reverse-engineered 1:1 component with spring physics, accessible keyboard controls, and modular Tailwind CSS.

Live Sandbox Public View Code PRO View Prompt PRO
https://northlight.design/sandbox/1975248506152767834
Launch Sandbox ↗
Production React 19 TypeScript + Framer Motion source component
🔒 Unlock Source Code ($19/mo)

Reference details

Creator
JohnPhamous
X handle
@JohnPhamous
Published
October 6, 2025
Media
1 visual reference
Views
25,561
Likes
633
Bookmarks
267

Related tags