Dennis Snellenberg

@osmosupply @eduardbodak

Live now: The Osmo Button Pack! 🎉 A collection of 100 hand-made buttons in collaboration with @eduardbodak, which we’ve worked on for the past 6 months. Buttons are easy to overlook, because they’re small. But making one feel really good can take a surprising amount of time. The hover state, focus state, motion, accessibility, timing, and the tiny details around it. When it’s done right, it can be a real eye catcher on a website. We made every button production-ready. Semantic HTML, fully accessible, correct hover and focus states, reduced-motion support, and easy customization through CSS variables unique to each button. Pricing is simple. Get 100 buttons for a one-time price of €100 EUR. Or, become an Osmo member and you'll get 50/100 for free. The remaining 50 can be unlocked for €50 EUR.

Who needs Jitter templates if you can create it with @greensock.

Osmo Button Pack – Coming Soon! Buttons are the most clicked element on the web, but most of them feel like an afterthought. So we partnered with @eduardbodak to make 100 buttons with real personality, and the flexibility to make them yours. Every single one is built with the kind of care you'd give a button if you had a whole week to work on just that one. 50/100 buttons will be available straight away for all Osmo members. The additional 50 can be unlocked with a one-time purchase.

The 11th page transition template we added, all included in the Osmo Page Transition Course.

This modern visual effect uses a recently introduced Figma technique to create a Progressive Blur. It consists of five blurred layers, each masked with a gradient and offset on the Y axis, creating a smooth effect that brings focus to the element above. ↓ Use Osmo in your project osmo.supply

With this 'Scroll to Next Page' setup you can make it very seamless for users to keep scrolling through your website. Towards the bottom of the page, they simply scroll until the progress bar is full, and then you automatically send them to the next page. We highly recommend pairing this with a nice BarbaJS page transition for a seamless experience. We have a full course + some beautiful templates for that available as well 🙌

Want to give your site a bit more personality? This setup uses the @greensock ScrambleText plugin to animate a custom cursor on hover.  It smoothly follows your mouse on non-touch devices and scrambles through the words that you hover.

It’s not like we reinvented the wheel on this easings visualizer. There are many tools already that do this, but it’s the combination of presets and the context preview that makes it special. With this Osmo Easings tool you can: • Edit and tweak your favorite easings • Save your personal easings • Paste them into your project in three different ways What makes the Osmo Easings tool different is that you can preview your favorite easings in context across five formats: text, buttons, modals, sliders, and FAQ. And yes, all free to use for Osmo Members!

As a community request following last week's 'pixelated scroll transition' resource, we've now also added this shutter transition. It creates a stack of full-width blocks, animating the vertical scale. Hence it looks like typical window shutters. Again, full customizable with data-attributes ✨ Part of the Osmo Vault, become a member today → link in bio!

Introducing the Osmo Easing tool! The easing curve is the single thing that decides whether an animation feels polished or off. But getting it right can sometimes be a bit of a guessing game, so we built something that will hopefully make our lives a little easier. We've teased this as 'coming soon' for quite some time, so we're very excited to launch this today. It's free for all Osmo members. Try it out and let us know what you think! Not a member yet? Sign up below. 🔗 osmo.supply

Recently, @JordanGilroy created a beautiful website for Studio X featuring a glass-style navigation element. The core effect is built entirely with CSS, using blend modes, box shadows, and layered effects to add that extra little depth and character to the interface.

More pixels! This resource allows you to create seamless transitions between your sections. Fully configurable with data attributes; columns, rows, reveal mode, scroll positions, responsive breakpoints. Just drop a div in your section, set your attributes, and you're done ✨

@ConorCartenio @iljavaneck Complete your account mannn!

Ngl, the double-take on this was crazy. Well played @iljavaneck @codebydennis 😂

Gave the @osmosupply dashboard a font upgrade today. Feels like a solid step up. I’ll let you decide.

You can now legally copy parts of my portfolio without ending up on copydennis.com

Love this part of the @osmosupply site

Counters are everywhere on the web, but most of them just tween a number. This one rolls digits through a vertical strip like a mechanical odometer, giving it that satisfying slot-machine feel. Works with any number format, currencies, prefixes, suffixes, and handles growing digit counts smoothly when a number jumps between different digit counts. Set a custom start value, control the stagger direction, and adjust timing per element. Need it outside of scroll? There's an optional function-based mode that lets you trigger the animation on click, filter change, or anything else.

Stacked sticky cards are used a lot these days on the web, so here’s the @osmosupply version. The cards smoothly move into their stacked position with full breakpoint customization, a subtle bounce on settle, and the flexibility to style it how you want.

Sometimes you just need a media setup that helps you play/pause a muted .mp4 video on hover. But when you also want that video to autoplay on touch devices, things become a little more complex. Especially if you want it to pause nicely when it leaves the viewport. So we created a setup that supports three use cases: autoplay, hover, and click. All of these modes can be different on touch devices. ↓ Use Osmo in your project osmo.supply