[See More Interaction] with a Contextual Last Read Tag ✨🤌🏽
Key takeaways: 📝
- I used a CSS Grid trick, toggling grid-template-rows between 0fr and 1fr to animate to an auto height smoothly.
- The "last read" pill is a chat-style bubble with a custom (using clip-path) top-right tail. To guide the eye, I added a "washed" highlight that grows from the bottom up to 60% using scaleY and origin-bottom, keeping the animation fluid and performant.
Inspo: TikTok UI
0
126
[003] New Experiment: Meet the team section, made with tailwind and framer-motion in Nextjs ✨🤌🏽
Inspo: https://attio.com/careers
(https://attio.com/careers)One of out many other experiments. 👷🏾♂️
2
181
[004] New Experiment: Pixel-dissolve image transition, made with GSAP in Nextjs ✨🤌🏽
2
129
[variant-1] Cursor-trail exploration on a canvas-rendered grid ✨
4
2
157
Animated card border ✨🤌🏾
This can be achieved in two ways: by manipulating the height and width, or by using transform scale(). The span tags will be positioned absolutely in all four corners. Using the transform scale() method is more performant, but for something like this, the difference is negligible.