Dennis Snellenberg

Co-Founder: @osmosupply

[Osmo @osmosupply]

Bring your text to life with a classic Typewriter Effect. Choose between a consistent typing speed or a more natural feel with random pauses, just like someone typing on a keyboard. It supports nested elements like spans, links, and italic text, and you can easily adjust the speed and cursor styling. The effect automatically starts when entering the viewport, but can also be triggered manually for use in page transitions or loading animations.

↓ Try Osmo for Free
https://t.co/Ir7tM7nfXa

[Osmo @osmosupply]

Someone in our community recently asked for a slider to show off portfolio projects, so we built this Showcase Slider. Click a project and its cover grows into a slider with the rest of that project’s images, right where it is on the page. You can pull any text or link from a project into that view, and the grow size and parallax are both easy to tweak.

Part of the Osmo Vault now, along with 220+ resources.

Sign up today → https://t.co/872EQlKAlY

[Dennis Snellenberg @codebydennis]

Perfect as a starting point for AI

[Osmo @osmosupply]

We have a lot of fancy navigation/menu setups in the Vault, but one thing we were still missing was a basic navigation with support for dropdown menus that automatically adapts to mobile. No duplicate navigation elements needed! Everything is animated with CSS, with just a little JavaScript to toggle attributes when opening and closing the navigation. A perfect starting point for most projects!

↓ Try Osmo for Free
https://t.co/Ir7tM7nfXa

[Dennis Snellenberg @codebydennis]

@outseta Feature request: make sure people can’t share a single Solo account with an entire team. Otherwise, why would anyone pay for the Team plan when everyone can just use the same login?

[Osmo @osmosupply]

This Wavy Accordion is a WebGL image accordion where the edges between the images bend as they open, and the quicker you move across them, the wavier it gets. The bend, drag and spring are all variables at the top of the script, so you can dial in exactly how wavy you want it.

Available now in the Osmo Vault.

[Osmo @osmosupply]

Our latest page transition template has been added to the Page Transition Course collection, bringing the total to 14! Built with Barba.js and animated using GSAP, this double wipe effect gives you the perfect opportunity to show some brand colors on your website.

↓ Course
https://t.co/EGl7gBoHpg

[Osmo @osmosupply]

Getting a list of cards to animate in with a stagger on scroll can be tricky, especially when the number of columns changes across breakpoints. This Queued Scroll Reveal setup uses a shared queue to keep the stagger timing consistent, no matter how the grid changes. Just add two attributes to the parent and you’re good to go.

↓ Use Osmo in your project
https://t.co/hHRGWuA0BJ

[Osmo @osmosupply]

This Globe Gallery started on our Button Pack landing page, and we turned it into an improved version that wraps the images much more neatly around the sphere. It spins slowly on its own, speeds up whenever you scroll, and eases back once you stop. From the number of rows and columns to the tilt, the depth, the spin speed and a bunch more options, it's all easy to tweak at the top of the script.

[Osmo @osmosupply]

We added an Elastic Line effect to the Vault. Move your cursor over this <svg> path and it reacts a bit like touching the string of a guitar, stretching with your movement and bouncing back into place. A fun little interaction to make a simple divider feel a lot more alive.

[Osmo @osmosupply]

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
https://t.co/Ir7tM7nfXa

[Osmo @osmosupply]

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.

[Osmo @osmosupply]

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
https://t.co/hHRGWuA0BJ

[Osmo @osmosupply]

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
https://t.co/hHRGWuA0BJ

[Osmo @osmosupply]

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
https://t.co/hHRGWuA0BJ

[Osmo @osmosupply]

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

[Osmo @osmosupply]

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
https://t.co/hHRGWuA0BJ

[Osmo @osmosupply]

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

[Osmo @osmosupply]

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)
https://t.co/Ir7tM7nfXa

[Osmo @osmosupply]

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!

[Dennis Snellenberg @codebydennis]

Made this yesterday ✨

Now available on @osmosupply, alongside 200+ other resources.