Nexvyn
141 posts
Nexvyn
@Iamnexvyn
Frontend Developer | Build Stunning Websites |
Katılım Ağustos 2025
35 Takip Edilen9 Takipçiler
Nexvyn retweetledi
3D button with a hollow base, dot indicator, and spring-based press feedback.
<motion.button
animate={isPressed ? { y: -18, x: 8, rotateZ: -14 } : { y: 0, x: 0, rotateZ: 0 }}
transition={{ type: "spring", stiffness: 300, damping: 14, mass: 0.9 }}
/>
@motiondotdev
English
Nexvyn retweetledi
Nexvyn retweetledi
Nexvyn retweetledi
Try recreating this temperature slider.
@motiondotdev
Tiago Alexandrino@tfalexandrino
Temperature slider 💅
English
Nexvyn retweetledi
Nexvyn retweetledi
Nexvyn retweetledi
Recreate image reveal effects using CSS clip-path.
.reveal {
clip-path: inset(0 100% 0 0);
animation: show-image 1s linear forwards;
}
.particle {
opacity: 0;
animation: particle-spark forwards cubic-bezier(0.25, 1, 0.5, 1);
}
Simple setup, smooth reveal animation.@mannupaaji
Manu Arora@mannupaaji
Create image reveal effects with CSS 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 .𝚛𝚎𝚟𝚎𝚊𝚕 { 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚒𝚗𝚜𝚎𝚝(𝟶 𝟷𝟶𝟶% 𝟶 𝟶); 𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚜𝚑𝚘𝚠-𝚒𝚖𝚊𝚐𝚎 𝟷𝚜 𝚏𝚘𝚛𝚠𝚊𝚛𝚍𝚜 𝚕𝚒𝚗𝚎𝚊𝚛; } @𝚔𝚎𝚢𝚏𝚛𝚊𝚖𝚎𝚜 𝚜𝚑𝚘𝚠-𝚒𝚖𝚊𝚐𝚎 { 𝚝𝚘 { 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚒𝚗𝚜𝚎𝚝(𝟶 𝟶 𝟶 𝟶); } } Perfect for reveal effects, easy to implement
English
Nexvyn retweetledi
Nexvyn retweetledi
Nexvyn retweetledi
iOS-style dropdown menus often feel abrupt or disconnected from the trigger.
Solution: a dropdown with smooth scale + fade animation that anchors to the button and feels native.
Built with @motiondotdev + Tailwind.
Responsive, accessible, and interruptible.
English
Nexvyn retweetledi
Password inputs hide content, but toggling visibility often feels clunky or inaccessible.
Solution: a password input with smooth hide/reveal animation and an animated SVG toggle button.
Built with @motiondotdev + Tailwind. Accessible, interruptible, and clean.
English
Nexvyn retweetledi
The spotlight reveal effect
A story told through CSS masks and cursor tracking.
From grayscale to full colour, following your every move.
- One seamless grid, zero complex overlays
- mask-image does the heavy lifting
- Smooth tracking via @motiondotdev
English
Nexvyn retweetledi
Just wrapped up this custom Range Slider component.
- Labels dynamically switch from outside to inside the thumb
- Smooth number transitions using number-flow
- Spring animations with @motiondotdev
Built with React + Tailwind.
English
Nexvyn retweetledi
Built a vertical scroll minimap with dynamic line scaling for smoother navigation feedback.
Inspired by @raunofreiberg
English
Nexvyn retweetledi
Nexvyn retweetledi
Nexvyn retweetledi
A smooth radial transition using clip-path with a spring animation. Inspired by @jh3yy.
Built with @motiondotdev.
jhey ʕ•ᴥ•ʔ@jh3yy
one way w/ css 🪄 stack an image 2x filter 1st, unclip 2nd on :hover 🤙 a img { grid-area: 1 / 1; } img:first-of-type { filter: grayscale(1) invert(1); } img:last-of-type { clip-path: circle(0); transition: clip-path; } a:hover img:last-of-type { clip-path: circle(100%); }
English
Nexvyn retweetledi