(01) A shader carousel
for Framer One file
Raw WebGL2
Zero dependencies Early access
2026

Meridian

Drag-through galleries for Framer sites.
Seven paths, one file, nothing to install.

(02) Showcasepath="ring" · autoplay={true}

Drag it through space.

(01/12) Cube

Drag ← → · click a card

(03) Why Meridian

Meridian turns a row of images into something people want to touch. Your cards sit on a path, a ring or a helix or a wave, and move with real weight when someone drags them. It lives in Framer as one file you paste in, with every setting in the property panel.

(04) PathsHover a tile to speed it up

Seven paths. One drag.

(05) How it worksAbout a minute, start to publish

Paste. Drop. Tune. Ship.

1Paste the file

One file, pasted once

Create a code file in Framer, paste Meridian.tsx, and drag the component onto the canvas. No packages, no remote imports.

Meridian.tsx15 sections

// 01 · Header
// 02 · Types & defaults
// 03 · Math helpers
// 04 · Paths
// 05 · Physics
// 06 · Procedural materials
// 07 · Shader source
// 08 · Card factory
// 09 · Reflection
// 10 · Post chain
// 11 · Engine
// 12 · Presets
// 13 · DOM overlay
// 14 · React component
// 15 · Property controls
// 01 · Header
// 02 · Types & defaults
// 03 · Math helpers
// 04 · Paths
// 05 · Physics
// 06 · Procedural materials
// 07 · Shader source
// 08 · Card factory
// 09 · Reflection
// 10 · Post chain
// 11 · Engine
// 12 · Presets
// 13 · DOM overlay
// 14 · React component
// 15 · Property controls

2Add your work

Images or a CMS collection

Drop images into the slots, or bind a Framer CMS collection and name the fields. Captions and links follow each card.

Drop images
or bind CMS

3Turn the knobs

Every setting is a control

Pick a path, set bend and spacing, style the caption. Thirteen control groups, all in Framer's property panel.

4Publish

Ships with the site

Publish as usual. The carousel draws to a single WebGL2 canvas, and nothing else is loaded on the page.

publishing0%

yoursite.framer.website

(06) PlaygroundEvery option, live

Try every knob.

Specimenhelix · 12 cards

(01/12) CubeDrag · click · arrow keys

Path

Spacing1.00

Velocity bend1.0

Corner radius0.07

Cards12

Autoplay

(07) EngineWhat's inside Meridian.tsx

Small file. Serious engine.

File

Everything ships in Meridian.tsx. Paste it and it runs. Nothing to resolve inside Framer.

Dependencies

Raw WebGL2, written by hand. No three.js added to your page weight.

Paths

Line, arc, wave, fan, helix, ring and cylinder, with a smooth morph between any two.

Control groups

Path, cards, physics, caption and more, each collapsible in the property panel.

60 Hz

Physics substeps

The spring integrates at a fixed rate, so a long frame never makes it jump.

3 px

Drag slop

Pointer capture waits for real travel, so links inside a card still click.

Velocity bend: Cards bend along the path's own tangent as they move, never along a fixed axis.
Hover ripple: Raycast against the undisplaced card, so the ripple never feeds on itself.
Edge treatment: Depth push, fade and desaturation toward the frame edge, measured per card.
Corners: Rounded in world units with anti-aliased edges at any size.
Camera: Spring-tracked and auto-fitted to every path, every frame.
Captions: A real DOM overlay that follows the active card on the engine's own frame.
Content: Image slots, or a Framer CMS collection mapped by field name.

(08) Feeltrigger="scroll"

Drag has weight. Cards bend with speed, settle on a spring, and every link inside still clicks.

Scroll

00%

(09) PricingPrices are placeholders

Buy once. Use on real work.

Solo

[PRICE]For your own portfolio or product site

Sites: 1
Updates: All v1 releases
Remix project: Included
Support: Email

Studio

[PRICE]For client work, as many sites as you ship

Sites: Unlimited
Updates: All v1 releases
Remix project: Included
Support: Priority email

One file, ready tonight.
Paste it into Framer and drag.

Get Meridian