Glass Exit Carousel

A diagonal card carousel in WebGL: cards step along a slanted conveyor and smear into a glass flare, with a spectral split and haze, as they leave the frame and enter it again.

About this tool

A diagonal card conveyor drawn in WebGL2 with three.js. Nine cards rest, then step one slot along a slanted line with a fast attack, and the loop returns to its opening rest without a seam. In the readable band the cards stay flat and sharp; as they leave at the upper left their trailing edge lags, fans open and rises toward the lens, and a post pass adds a spectral split and a hue-shifted haze only where the cards fold. Cards entering at the lower right do the same, shorter. The set mixes a kanji card that changes character on the beat, a yellow eyewear card, three colour cards with Japanese headlines (one set vertically) and four photographs you can replace. Card colours and text, the four corner labels, background, speed and the strength of the glass, flare and haze are all editable live. The engineering holds up in a real page: a screen reader gets a list of the cards and a live region, a play and pause button and the Space key stop the motion, reduced motion holds the opening rest, rendering pauses off screen, slow devices drop to half resolution, and a browser without WebGL sees a still image instead of a hole. The Japanese type is a self-hosted Noto Sans JP subset, and the export is one HTML file that loads its photos and font from the CDN.

In collections: React Carousels & Image Galleries

Guide: Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion React Carousel: Build One With CSS Scroll Snap or a Library HTML Marquee Is Deprecated: How to Build a Modern Marquee

Carousel · HTML / CSS / JS All tools

Assets

Kanji card

Characters

Yellow card

Card colour

#ffffff

Large mark

Japanese title

Brand

Colour card 1

Card colour

Text colour

Caption

Number

Japanese headline

Headline direction

horizontal vertical

Small line

Corner labels

Top right

Bottom left

Bottom centre

Bottom right

Show labels

true false

Glass

Glass strength

Flare length

Colour haze

Motion

Playback

playing paused

Speed x

Stage

Background

#ffffff

Floor shade

true false