Design inspiration curated from X

It only takes one layer in Icon Composer to achieve this effect. Ju... - Greg Sarafian

Published by Greg Sarafian on October 30, 2025.

It only takes one layer in Icon Composer to achieve this effect. Ju... - Greg Sarafian - UI design by @GregSarafian on X
It only takes one layer in Icon Composer to achieve this effect. Just make sure to bleed the SVG out of bounds otherwise you may end up with a jarring double specular highlight on the icon’s edges.

Design notes

It only takes one layer in Icon Composer to achieve this effect. Just make sure to bleed the SVG out of bounds otherwise you may end up with a jarring double specular highlight on the icon’s edges.

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 Greg Sarafian; 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/1983936835320455280
Launch Sandbox ↗
Production React 19 TypeScript + Framer Motion source component
🔒 Unlock Source Code ($19/mo)

Reference details

Creator
Greg Sarafian
X handle
@GregSarafian
Published
October 30, 2025
Media
1 visual reference
Views
1,924
Likes
19
Bookmarks
6

Related tags