Animated Gradient Borders with Pure CSS
Smooth, endlessly rotating conic-gradient borders that wrap any element in flowing color.
Horizontal Stacking Cards
Horizontal Stacking Cards is a scroll-triggered effect where cards slide horizontally from the right and stack behind the first card, each becoming slightly smaller to create depth. It’s perfect for showcasing portfolios, products, or galleries in a compact, interactive layout.
Subgrid Layouts That Line Up
Align titles, text & buttons across every card with the CSS subgrid property
Bento Grid Sliders
Bento Grid layout, filled with synchronized sliders.
Horizontal Stacking Cards
Cards that slide, stack, and fade into depth.
Infinite Sine Wave Slider
Infinite Sinusoidal Carousel Featuring Adjustable Amplitude, Frequency & Phase
With a Post Loop Builder element - Pin version
The column will stop at the center of the screen, then the animation will start.
Animated Gradient Borders with Pure CSS
Smooth, endlessly rotating conic-gradient borders that wrap any element in flowing color.
Subgrid Layouts That Line Up
Align titles, text & buttons across every card with the CSS subgrid property
Bento Grid Sliders
Bento Grid layout, filled with synchronized sliders.
Horizontal Stacking Cards
Cards that slide, stack, and fade into depth.
Infinite Sine Wave Slider
Infinite Sinusoidal Carousel Featuring Adjustable Amplitude, Frequency & Phase
With a Post Loop Builder element
Just a regular animation that start when the top of the Supa Code Block element (container) reach 90% of the screen (from the bottom).