We’re big fans of simple animations that make interactions feel a little more playful. This custom checkbox adds a subtle bounce when selected, combined with an animated checkmark. Fully semantic, built with just HTML and CSS, and easy to implement in any form setup. ↓ Try Osmo for Free osmo.supply/try

Someone asked about Rive in our community the other day, so we decided to build a base setup for it! Rive Setup mirrors our Lottie Setup: drop a Rive on the page with a single attribute and it only loads once it's about to scroll into view, pauses while it's off screen, and shows a still frame for anyone who prefers reduced motion. Available in the Osmo Vault.

We created a Wavy Marquee that infinitely loops across the screen and interacts with the user’s scroll speed and drag movement. Scroll faster and the marquee picks up speed while the wave grows, or drag and swipe horizontally to take control of the movement. Fully responsive, with simple controls for speed and wave shape. A playful way to add some extra movement and depth to your website. ↓ Use Osmo in your project osmo.supply

Top 5 Slider/Carousel Resources 📚 We picked five of our favorite sliders and carousels from the Osmo Vault. From simple ways to browse content to more playful and experimental interactions, there should be something here for your next build. 1. Flick Cards Slider Flick through a layered stack of cards to explore each piece of content. The elastic drag gives every swipe a playful, physical feel as the cards stretch, bounce, and settle naturally into place. 2. Radial Cards Slider A playful slider where cards rotate along a curved path, bringing the active card front and center while the surrounding cards fan out naturally. A great way to showcase visual content with a little more character than a traditional carousel. 3. Liquid Glass Carousel This carousel uses a liquid glass shader effect that refracts each slide as it passes behind the lens. With plenty of variables to tweak the look and feel of the glass effect. Big shout out to Yousuf Soomro, who open sourced the original lens shader under MIT and made this one possible. 4. Cascading Slider This horizontal carousel expands and collapses slides as you navigate through them. The active image gets plenty of space while the surrounding slides remain visible, giving you a preview of what’s coming next. Inspired by the Stripe website. 5. Dropping Cards Stack Watch each card drop out of view as gravity takes over, revealing the next one in the stack. The layered setup adds depth and makes every transition feel surprisingly physical. 👉 Ready to level up? We have a Vault packed with 210+ resources ready waiting for you. ↓ Use Osmo in your project osmo.supply

We just uploaded a fully Dynamic Line Graph that turns your own data (pulled from the HTML) into an interactive graph, with the option to switch between smooth curves or exact lines that follow your data points more closely. Hover across the graph to explore each point through a dynamic tooltip. Perfect for dashboards, reports, case studies, portfolios, or anywhere you want to make statistics and performance data feel a little more interactive. ↓ Use Osmo in your project osmo.supply

Here’s our top 5 most popular resources of last month! • On first place we have the CSS-powered 'Stacking Cards 3D' that we shared for free in collaboration with @webflow! • Second place is the 'Bouncy Content Tabs', a playful way to present some content on your site. • On third we find our 'Mega Navigation' which is a consistent member-favourite and has been in the top 5 many times before! • Fourth is our 'Spatial Cards Slider'. This makes for a 3D effect by curving the slides towards the user, but can also be flipped with a single tweak, to make more of a globe-like effect. • Closing the top 5 is our 'Product Hotspot Modal' which lets you place interactive hotspot targets over a product visual that open a modal with the connected product detail Becoming an Osmo member grants you access to well over 200 of these resources → link in bio

Not every animation has to steal the show, sometimes it’s the little details that bring everything together. This Analog Clock updates live based on any timezone you give it, making it a fun little addition for showcasing offices, studios, or teams spread across the globe. Or just add it as a visual element to your portfolio to show where you’re based. ↓ Use Osmo in your project osmo.supply

This carousel has a liquid glass shader running over the top, refracting your slides as they pass behind it. Drag or swipe and it settles onto the nearest image by itself. The size, rotation, colour, ring and dispersion of the lens are all easy to tweak with variables at the top of the script. Big shout out to @YousufSoomroDev, who open sourced the original lens shader under MIT and made this one possible. Available in Osmo now

This Interactive Grid turns your background into a subtle field of dots or pixels that reacts as you move across the page. Dots around your cursor smoothly grow and become more visible, creating a soft trail of movement without taking over the design. Built with <canvas>, the pattern can efficiently stretch across multiple stacked sections while staying perfectly aligned, so it feels like one continuous grid. You can even switch colors between light and dark sections without breaking the pattern, and tweak the size, spacing, radius, scaling, easing, and more directly in the JavaScript. And yes, you might remember we released an Glowing Dots Grid last year. That version uses GSAP and is more of a playful, attention-grabbing interaction for heroes. This new setup is designed as a background effect, with smaller and more subtle interactions that can continue across your entire page. ↓ Give Osmo a try (For Free) osmo.supply/try

One more scroll transition! This one uses a single curve to cover your section. Fully configurable with data attributes; curve depth, reveal mode, scroll positions. Just drop a div in your section, set your attributes, and you're done ✨ Part of the Osmo Vault, become a member today → link in bio!

Made this yesterday ✨ Now available on @osmosupply, alongside 200+ other resources.

This product section lets you place interactive hotspot targets over a product visual that open a modal with the connected product detail, with smooth CSS-powered transitions, looping navigation, arrows and auto-generated dots, all easy to customize. ↓ Try Osmo for Free osmo.supply/try

This floating dock is a handy way to guide visitors through longer pages. It always shows the section you're currently reading, swapping its label with each one you pass, and hovering it reveals the full list of anchor links. Comes with either a 'bouncy' or a smooth feel. A data attribute lets you control exactly where it shows and hides, so you can run it across a full page or just a single process, feature, or portfolio section. Part of the Osmo Vault with 200+ resources: link in bio 🔗

My favourite slider so far ✨

This sticky stacking cards effect is built entirely with modern CSS, using the latest CSS Scroll-driven Animations and View Timelines. As you scroll, each sticky card stays pinned while the previous card tilts back in 3D, creating the illusion of a physical stack without a single line of JavaScript. Watch @iljavaneck do a live build on YouTube, and try the free Webflow cloneable below: YouTube: piped.video/watch?v=UNydZF9o… Webflow Cloneable: webflow.com/made-in-webflow/… ↓ Try Osmo for Free: osmo.supply/try

🧭 Top 5 Navigation/Menu Resources Navigation resources have become one of the most popular categories in the Osmo Vault. Whether you’re building something clean or experimental, these are the five resources our members use the most. 1. Multilevel Navigation Our most popular navigation in the collection. This multi level menu combines multiple layouts with subtle CSS animations, while the interactive tiles give it a modern and engaging feel. 2. Mega Navigation (Directional Hover) This mega navigation, inspired by the Stripe website, is perfect for projects with complex, multi level page structures. The directional hover effect creates a smooth, satisfying experience that naturally guides visitors to the right pages. 3. Scaling Hamburger Navigation This simple CSS based hamburger menu expands directly from the trigger button, revealing a compact list of links with a smooth scaling animation. One of the first navigation resources in the Osmo Vault. 4. Bold Full Screen Navigation Full screen navigations are often used on bold websites that prioritize identity over traditional UX patterns. This CSS based version is perfect for those use cases. 5. One-page Progress Navigation Perfect for long scrolling pages, this fixed navigation acts as both a menu and a progress indicator, giving visitors a clear sense of how much they have scrolled through the page. The active state updates automatically as they move through each section. ↓ Use Osmo in your project osmo.supply

New 3D Perspective Tiles Resource. It uses perspective, blur, and mouse tilt to create the illusion of depth while preserving the smooth infinite loop. As always, everything is easy to customize with tweakable variables. ↓ Use Osmo in your project osmo.supply

This tab system is a playful way to present content: the pill indicator travels with a bounce, overshooting its target and squashing as it lands, while the content card squeezes, swaps its panel mid-squeeze, and re-molds around whatever comes next. It's fully keyboard accessible, wraps neatly on smaller screens, and the timings live in one config object so you can tune the feel to your liking. Part of the Osmo Vault, alongside 200 other resources.

This interactive image collage is a creative way to showcase visuals while adding a sense of depth to your website. Hover over any card to bring it into focus as the surrounding cards smoothly move aside. This example uses images, but you can easily replace them with any type of content to create your own unique experience. Images from: @arqe_ai ↓ Use Osmo in your project osmo.supply

The Osmo Community seems to love Text Reveal Animations, so we crafted this new one that reveals text letter by letter, first fading into an accent color before finally settling into the default color of the text. It’s a great way to add color to your experience without having it permanently visible on the page. Simply add [data-gradient-wave-text] to your text element, and you’re ready to go. ↓ Use Osmo in your project osmo.supply