Skip to content

Loaders · 50

Pulse Dots

Wave Physics

Spring Matrix

Profile Skeleton Loader

Buttons · 19

Follow Halo Drift Button

Interactive Hover Button

Relief Button

Jelly Button

Magnet

Shatter Halo Drift Button

Sparks Halo Drift Button

Shockwave Halo Drift Button

Gravity Halo Drift Button

Decode Halo Drift Button

Ripple Halo Drift Button

Calm Halo Drift Button

Thinking · 9

Hover · 1

Checkbox · 5

Diagonal Fill Checkbox

Prism Checkbox

Cross Morph Checkbox

Firework Todo Checkbox

Orbs · 16

Tooltips · 3

Switch · 3

Neumorphic LED Switch

Inputs · 3

Selectors · 2

Pagination · 2

Cards · 8

Brands · 2

Menu · 4

Accordion · 1

AI · 2

Range Sliders · 5

Precision Effort Slider

Pixel Effort Slider

Overdrive Effort Slider

Stepper · 1

Testimonials · 2

Breadcrumb · 1

Modal · 1

Unlock the full catalog

$24.99 /month

Get Starter

5.0 on Gumroad · 14 verified ratings

Already have an account? Log in

Accordion Gallery

An image row where the panel under the cursor opens to a set share of the width and its neighbours tilt away.

About this tool

A row of image panels that behaves like one control. The open panel takes an exact fraction of the row (52% by default), because the width itself is what the animation writes, so the proportion survives any panel count and any stage width. Its neighbours fan away by how far they stand from the opening rather than all tilting the same amount, each image drifts against its panel so the row reads as depth instead of a resize, and the closed panels desaturate and dim continuously rather than on a class swap, so the filter fades instead of snapping. The caption bar and its text stagger in behind whichever panel opened. Opens on hover or on click, answers arrow keys, Home and End with a visible focus ring, stacks into a column on narrow screens, and holds a still pose under prefers-reduced-motion. Panels, captions, open share, gap, radius, tilt, parallax, dim, easing and cadence are all editable, and the export is one self-contained HTML file that animates with no library and no network.

In collections: Web Image Galleries & Photo Grid Layouts React Carousels & Image Galleries

Guide: Tailwind Accordion: Accessible Copy-Paste Code (2026) React Carousel: Build One With CSS Scroll Snap or a Library Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion

UI/UX · HTML / CSS / JS All tools

Assets

Caption 1

Caption 2

Caption 3

Caption 4

Caption 5

Caption 6

Layout

Open share

Panel gap px

Corner radius px

Open panel

Orientation

horizontal vertical

Surface

Closed dim

Desaturate closed

true false

Captions

true false

Accent

Caption colour

Motion

Transition s

Easing

linear ease glide swift spring

Trigger

hover click

Stage

Stage width px

Stage height px

Shopping Cart

Your cart is empty. Add a product to see it here.

Price Amount $0.00

Products are unlocked right after checkout.