Share your work

Showcase Submit

Used an Osmo resource in your latest project? Submit your work for the chance to get featured in the Osmo Showcase and get the recognition you deserve!

Submission credits

A showcase submission allows up to two credits. On social media, we can include additional credits. Add those in the last part of this form.

Extra
Credits
+ Add more credits
Even more?
Social credits

Optionally, you can add extra social URLs below for any additional parties you collaborated with (for example, a client or a third designer/developer)

Osmo resources used *

Tell us which Osmo resources you used in your work. Don't forget the Osmo Scaling System!

Cursor Coordinates

Cursor Coordinates

Cursor Animations

Cursor CoordinatesTrack Mouse Position
Elastic Pulse Button (Bouncy)

Elastic Pulse Button (Bouncy)

Buttons

Elastic Pulse Button (Bouncy)Blob, Spring
Horizontal Scrolling Sections

Horizontal Scrolling Sections

Scroll Animations

Horizontal Scrolling Sections
Opening Hours (Timetable)

Opening Hours (Timetable)

Utilities & Scripts

Opening Hours (Timetable)Open, Closed, Store, Restaurant
3D Perspective Hover

3D Perspective Hover

Hover Interactions

3D Perspective HoverRotate, Tilt, Mousemove
Footer Parallax Effect

Footer Parallax Effect

Sections & Layouts

Footer Parallax EffectLayers, Scrolltrigger
Layout Grid Flip

Layout Grid Flip

Sections & Layouts

Layout Grid FlipView Toggle Switch
Social Share Buttons

Social Share Buttons

Utilities & Scripts

Social Share ButtonsClipboard, Copy, Link
Swiper Slider Setup

Swiper Slider Setup

Sliders & Marquees

Swiper Slider SetupCarousel, Cards
Countdown

Countdown

Utilities & Scripts

CountdownTime, Date
Magnetic Cursor

Magnetic Cursor

Cursor Animations

Magnetic CursorMouse Follower
Custom Bunny HLS Lightbox (Advanced)

Custom Bunny HLS Lightbox (Advanced)

Video & Audio

Custom Bunny HLS Lightbox (Advanced)HTML Player, Video
Bunny HLS Background Video

Bunny HLS Background Video

Video & Audio

Bunny HLS Background VideoHTML Player, Video
Custom Bunny HLS Player (Basic)

Custom Bunny HLS Player (Basic)

Video & Audio

Custom Bunny HLS Player (Basic)HTML Player, Video
Logo Reveal Loader

Logo Reveal Loader

Loaders

Logo Reveal Loader
Custom Bunny HLS Player (Advanced)

Custom Bunny HLS Player (Advanced)

Video & Audio

Custom Bunny HLS Player (Advanced)HTML Player, Video
Sticky Features

Sticky Features

Scroll Animations

Sticky Features
Accelerating Globe on Scroll

Accelerating Globe on Scroll

Gimmicks

Accelerating Globe on ScrollEarth
Button with Slanted Reveal

Button with Slanted Reveal

Buttons

Button with Slanted Reveal
Cursor with Marquee Effect

Cursor with Marquee Effect

Cursor Animations

Cursor with Marquee EffectGSAP
Stacking Cards Parallax

Stacking Cards Parallax

Scroll Animations

Stacking Cards ParallaxOverlap, Sticky
Multi Filter Setup (Multi Match)

Multi Filter Setup (Multi Match)

Filters & Sorting

Multi Filter Setup (Multi Match)Sort, Grid, Tiles, List
Basic Filter Setup (Multi Match)

Basic Filter Setup (Multi Match)

Filters & Sorting

Basic Filter Setup (Multi Match)Sort, Grid, Tiles, List
Elements Reveal on Scroll

Elements Reveal on Scroll

Scroll Animations

Elements Reveal on Scroll
Pixelate Image Render Effect

Pixelate Image Render Effect

Gallery & Images

Pixelate Image Render Effectscroll, reveal
3D Image Carousel

3D Image Carousel

Sliders & Marquees

3D Image CarouselDraggable
Directional List Hover

Directional List Hover

Hover Interactions

Directional List HoverGrid
Image Preview Cursor Follower

Image Preview Cursor Follower

Cursor Animations

Image Preview Cursor Follower
Logo Wall Cycle

Logo Wall Cycle

Sections & Layouts

Logo Wall CycleGSAP, Flip, Swap
Masonry Grid

Masonry Grid

Sections & Layouts

Masonry GridPinterest
Flick Cards Slider

Flick Cards Slider

Sliders & Marquees

Flick Cards SliderGSAP, Draggable
Back To Top Button

Back To Top Button

Utilities & Scripts

Back To Top Buttonscroll up
Face Follow Cursor (Mascot)

Face Follow Cursor (Mascot)

Gimmicks

Face Follow Cursor (Mascot)GSAP, Mouse, Illustration, Sun, Eyes
Multilevel Navigation

Multilevel Navigation

Navigation

Multilevel Navigationmega menu, dropdown
Momentum Based Hover (Inertia)

Momentum Based Hover (Inertia)

Hover Interactions

Momentum Based Hover (Inertia)Mouse, Movemement, GSAP
Tilting Bouncing Button

Tilting Bouncing Button

Buttons

Tilting Bouncing Button
Basic GSAP Slider (Watch CSS)

Basic GSAP Slider (Watch CSS)

Sliders & Marquees

Basic GSAP Slider (Watch CSS)Draggable, Inertia, Swipe, Drag
Follow SVG Path on Scroll

Follow SVG Path on Scroll

Scroll Animations

Follow SVG Path on Scroll
Locomotive Smooth Scroll Setup

Locomotive Smooth Scroll Setup

Scroll Animations

Locomotive Smooth Scroll SetupLenis, Parallax
Lottie Setup

Lottie Setup

Utilities & Scripts

Lottie SetupAnimation
Custom Cursor (CSS)

Custom Cursor (CSS)

Cursor Animations

Custom Cursor (CSS)Pointer, Hover, Mouse
Play Video on Hover (Lazy)

Play Video on Hover (Lazy)

Video & Audio

Play Video on Hover (Lazy)Bunny
WhatsApp Modal (Generate QR Code)

WhatsApp Modal (Generate QR Code)

Dropdowns & Information

WhatsApp Modal (Generate QR Code)Scan, Kjua
Stacked Cards Slider

Stacked Cards Slider

Sliders & Marquees

Stacked Cards SliderGSAP, Draggable, Flick, Shuffle
Global Parallax Setup

Global Parallax Setup

Scroll Animations

Global Parallax Setup
Falling Text with Gravity

Falling Text with Gravity

Gimmicks

Falling Text with GravityPhysics, Heading
Highlight Text on Scroll

Highlight Text on Scroll

Scroll Animations

Highlight Text on ScrollSplitText, Heading, Reveal
Draw Random Underline

Draw Random Underline

Buttons

Draw Random UnderlineGSAP, DrawSVG
Welcoming Words Loader

Welcoming Words Loader

Loaders

Welcoming Words LoaderLoading, Hello
404 Error Minigame

404 Error Minigame

Gimmicks

404 Error MinigameRocket, Destroy, Inertia, Draggable
Masked Text Reveal (GSAP SplitText)

Masked Text Reveal (GSAP SplitText)

Scroll Animations

Masked Text Reveal (GSAP SplitText)Heading, ScrollTrigger
Glowing Interactive Dots Grid

Glowing Interactive Dots Grid

Hover Interactions

Glowing Interactive Dots GridGSAP, Inertia
Javascript Toggle (Attributes)

Javascript Toggle (Attributes)

Utilities & Scripts

Javascript Toggle (Attributes)Navigation, Menu
Centered Scaling Navigation Bar

Centered Scaling Navigation Bar

Navigation

Centered Scaling Navigation BarMenu
Display Count

Display Count

Utilities & Scripts

Display CountTotal, Number
Draggable Stickers

Draggable Stickers

Gimmicks

Draggable StickersMove
Custom Vimeo Lightbox (Advanced)

Custom Vimeo Lightbox (Advanced)

Video & Audio

Custom Vimeo Lightbox (Advanced)Video, Modal, Pop-up
Sticky Title Scroll Effect

Sticky Title Scroll Effect

Scroll Animations

Sticky Title Scroll EffectText Reveal
Scaling Element on Scroll (GSAP Flip)

Scaling Element on Scroll (GSAP Flip)

Scroll Animations

Scaling Element on Scroll (GSAP Flip)Transform, Scrolltrigger, Video
Copy Email to Clipboard Button

Copy Email to Clipboard Button

Buttons

Copy Email to Clipboard ButtonContact, CTA
Falling 2D Objects (MatterJS)

Falling 2D Objects (MatterJS)

Gimmicks

Falling 2D Objects (MatterJS)Smiley, Gravity, Physics
Centered Looping Slider

Centered Looping Slider

Sliders & Marquees

Centered Looping SliderCarroussel, Swipe, Cards, Ticker
One-page Progress Navigation

One-page Progress Navigation

Navigation

One-page Progress NavigationMenu, Anchor, Steps
Button with Rotating Icon

Button with Rotating Icon

Buttons

Button with Rotating Icon
Parallax Image Gallery with Thumbnails

Parallax Image Gallery with Thumbnails

Gallery & Images

Parallax Image Gallery with Thumbnailsslider, caroussel, swiper
Scaling Hamburger Navigation

Scaling Hamburger Navigation

Navigation

Scaling Hamburger NavigationMobile, Menu
Before/After Split Slider

Before/After Split Slider

Gallery & Images

Before/After Split SliderCompare, Splitter
Play/Pause Video on Scroll

Play/Pause Video on Scroll

Video & Audio

Play/Pause Video on ScrollScrolltrigger, Bunny
Skeleton Loader Text

Skeleton Loader Text

Scroll Animations

Skeleton Loader TextGhost, Reveal
Flickity Slider Setup (Watch CSS)

Flickity Slider Setup (Watch CSS)

Sliders & Marquees

Flickity Slider Setup (Watch CSS)Carousel, Swipe, Cards
Interactive Pixel Grid

Interactive Pixel Grid

Hover Interactions

Interactive Pixel GridMouse Trail
CSS Marquee

CSS Marquee

Sliders & Marquees

CSS MarqueeLooping, Banner, Ticker
Velocity Based Custom Cursor

Velocity Based Custom Cursor

Cursor Animations

Velocity Based Custom CursorMouse Follower
Stop Motion Button (CSS Steps)

Stop Motion Button (CSS Steps)

Buttons

Stop Motion Button (CSS Steps)Stagger, Sprite
Dark/Light Mode with Cookie

Dark/Light Mode with Cookie

Utilities & Scripts

Dark/Light Mode with CookieTheme, Toggle, Color, Preference
Lightbox Setup

Lightbox Setup

Gallery & Images

Lightbox SetupImage, Modal, Popup
Audio Player (with Howler.js)

Audio Player (with Howler.js)

Video & Audio

Audio Player (with Howler.js)Music, Sound
Auto Image Cycle (Slideshow)

Auto Image Cycle (Slideshow)

Gallery & Images

Auto Image Cycle (Slideshow)Infinite, Loop, Carousel
Text Scramble (Load, Scroll, Hover)

Text Scramble (Load, Scroll, Hover)

Utilities & Scripts

Text Scramble (Load, Scroll, Hover)Shuffle, Glitch
Image Trail Following Cursor

Image Trail Following Cursor

Cursor Animations

Image Trail Following CursorMouse, Follower
Basic Filter Setup

Basic Filter Setup

Filters & Sorting

Basic Filter SetupSort, Tiles, List, Grid
Sticky Section Tabs (CSS Only)

Sticky Section Tabs (CSS Only)

Dropdowns & Information

Sticky Section Tabs (CSS Only)Accordion, Stacking
Change Page Title on Leave

Change Page Title on Leave

Gimmicks

Change Page Title on LeaveBrowser
Vimeo Background Video

Vimeo Background Video

Video & Audio

Vimeo Background VideoPlayer, Autoplay, Play, Pause, Media
Tab System with Autoplay Option

Tab System with Autoplay Option

Sections & Layouts

Tab System with Autoplay Option
Button with CSS Character Stagger

Button with CSS Character Stagger

Buttons

Button with CSS Character StaggerLink, Click
Basic Modal Setup

Basic Modal Setup

Dropdowns & Information

Basic Modal SetupLightbox, Pop-up
Toggle (CSS Only Trick)

Toggle (CSS Only Trick)

Buttons

Toggle (CSS Only Trick)Switch
Live Form Validation (Advanced)

Live Form Validation (Advanced)

Forms

Live Form Validation (Advanced)Input, Textarea, Select, Radio, Checkbox
Check Section Theme on Scroll

Check Section Theme on Scroll

Utilities & Scripts

Check Section Theme on ScrollNavigation, Menu
Burger Menu Button

Burger Menu Button

Buttons

Burger Menu ButtonLink, Toggle
Draw On Element with Cursor

Draw On Element with Cursor

Cursor Animations

Draw On Element with CursorMouse, Follower
Custom Vimeo Player (Basic)

Custom Vimeo Player (Basic)

Video & Audio

Custom Vimeo Player (Basic)Video, Pause, Media
Custom Vimeo Player (Advanced)

Custom Vimeo Player (Advanced)

Video & Audio

Custom Vimeo Player (Advanced)Video, Pause, Media
Accordion CSS Animation

Accordion CSS Animation

Dropdowns & Information

Accordion CSS AnimationDropdown, FAQ, Question
Marquee with Scroll Direction

Marquee with Scroll Direction

Sliders & Marquees

Marquee with Scroll DirectionSlider, Looping, Logos, Bar, Infinite
Detect Scrolling Direction (Up/Down)

Detect Scrolling Direction (Up/Down)

Utilities & Scripts

Detect Scrolling Direction (Up/Down)Navigation, Up, Down, Started
Magnetic Hover Effect

Magnetic Hover Effect

Buttons

Magnetic Hover EffectButton, Link
Lenis Scroll-To Anchor Target

Lenis Scroll-To Anchor Target

Utilities & Scripts

Lenis Scroll-To Anchor TargetLocomotive, Smooth, Link
Lenis Smooth Scroll Setup

Lenis Smooth Scroll Setup

Utilities & Scripts

Lenis Smooth Scroll SetupLocomotive
Mouse Cursor Confetti (GSAP Physics2D)

Mouse Cursor Confetti (GSAP Physics2D)

Gimmicks

Mouse Cursor Confetti (GSAP Physics2D)Random, Generative
Dynamic Current Time

Dynamic Current Time

Utilities & Scripts

Dynamic Current TimeTimezone, Hour, Minutes, Seconds
Morphing Play/Pause (GSAP MorphSVG)

Morphing Play/Pause (GSAP MorphSVG)

Buttons

Morphing Play/Pause (GSAP MorphSVG)Video, Player, Toggle
Scroll Progress Number

Scroll Progress Number

Scroll Animations

Scroll Progress NumberCounter
Scroll Progress Bar

Scroll Progress Bar

Scroll Animations

Scroll Progress Bar
Emoji Rain Effect

Emoji Rain Effect

Gimmicks

Emoji Rain EffectCelebration, Instagram
Basic Custom Cursor

Basic Custom Cursor

Cursor Animations

Basic Custom CursorMouse, Follower
Directional Button Hover

Directional Button Hover

Buttons

Directional Button HoverBubble
Number Loader in 3 Steps

Number Loader in 3 Steps

Loaders

Number Loader in 3 StepsLoading, Percentage
Button with Bubble Arrow

Button with Bubble Arrow

Buttons

Button with Bubble ArrowHover, Teleport
Underline Link Animation

Underline Link Animation

Buttons

Underline Link AnimationButton
Gallery to Overlay Transition (GSAP Flip)

Gallery to Overlay Transition (GSAP Flip)

Page Transitions

Gallery to Overlay Transition (GSAP Flip)GSAP, Flip, Transition, Overlay, List
Live Form Validation (Basic)

Live Form Validation (Basic)

Forms

Live Form Validation (Basic)Input, Textarea
Pixelated Page Transition

Pixelated Page Transition

Page Transitions

Pixelated Page TransitionPixels, Stagger
Expiring New Badge/Label

Expiring New Badge/Label

Utilities & Scripts

Expiring New Badge/LabelDate, Show, Dynamic, Label
Draggable Infinite Slider (GSAP Draggable)

Draggable Infinite Slider (GSAP Draggable)

Sliders & Marquees

Draggable Infinite Slider (GSAP Draggable)Swipe, Gallery
Side Navigation with Wipe Effect

Side Navigation with Wipe Effect

Navigation

Side Navigation with Wipe EffectMenu
Dynamic Custom Text Cursor (Edge Aware)

Dynamic Custom Text Cursor (Edge Aware)

Cursor Animations

Dynamic Custom Text Cursor (Edge Aware)Hover, Mouse
Osmo Scaling System

Osmo Scaling System

Utilities & Scripts

Osmo Scaling SystemCSS, Calc, Fluid
Dynamic Current Year

Dynamic Current Year

Utilities & Scripts

Dynamic Current YearCopyright
Parallax Image Layers

Parallax Image Layers

Scroll Animations

Parallax Image Layers
Apple Dock Navigation Bar

Apple Dock Navigation Bar

Navigation

Apple Dock Navigation BarMenu, Grow
Looping Words with Selector

Looping Words with Selector

Sections & Layouts

Looping Words with Selector
Pixelated Image Reveal

Pixelated Image Reveal

Hover Interactions

Pixelated Image RevealHover

We couldn't find a match for "Hello world"

Resource title

Category

Resource title

Category

Resource title

Category

Submit your work

Thanks for sending in your masterpiece! 🪄

The team just got pinged on Slack. Every showcase is handpicked, so we can’t promise every submission will be featured, and there’s no automatic notification when yours gets accepted.

🕓 Stay tuned, you might spot your work live on the site soon!

Back to Showcase
Something went wrong while submitting.