pleate.uiEffects
Effects

3D Effects

Depth without WebGL: a card that turns over, a ring of slides, cards that pile up as you scroll, a tilted wall of drifting tiles and a globe of dots you can turn.
import { FlipCard, Carousel3D, CardStack, TiltWall, DotGlobe } from "pleate/effects/depth";

Flip card

Click or press Enter on the boarding pass; the second card flips on hover and on focus.

TP 194612 Nov
LIS55 minOPO
Tap for seat and gate
Hover or focusAlfama rooftop flat€142 / night

Card stack

Scroll the page: each day sticks on top of the last, which tips back into the pile.

Day 10 km

Lisbon

Land 10:40, tram 28 to Alfama, dinner in Mouraria.

Day 228 km

Sintra

Train at 08:45, Pena Palace before the crowds, back by 18:00.

Day 3313 km

Porto

Alfa Pendular at 09:09, Ribeira walk, cellars across the river.

Day 4120 km

Douro

Boat up the valley, lunch at a quinta, last train home.

Tilt wall

Columns drift in opposite directions on a tilted plane; hover to stop them.

PT
Lisbon€142
IS
Reykjavíkkr 21,900
VN
Hanoi₫ 1.2M
TR
Istanbul₺ 3,100
JP
Kyoto¥18,400
GE
Tbilisi₾ 210
MA
MarrakeshMAD 890
EE
Tallinn€88
IT
Naples€118
PT
Porto€104
SI
Ljubljana€97
PE
CuscoS/ 260
MX
Oaxaca$96
ES
Seville€131
CL
Valparaíso$74
NO
Bergenkr 1,450

Dot globe

A canvas sphere of dots with labelled markers. It only animates while on screen.

Drag or use the arrow keys to turn it

Props

FlipCard front / back

The two faces; the card takes the height of the taller one.

ReactNode

flipped / defaultFlipped / onFlippedChange

Controlled or uncontrolled side.

boolean

trigger / axis

How it turns, and around which axis.

"click" | "hover" | "manual" / "x" | "y"default "click" / "y"

Carousel3D items

Slides; three or more make a ring.

ReactNode[]

index / defaultIndex / onIndexChange

Front slide, controlled or not.

number

itemWidth / itemHeight / gap

Slide size; the ring radius follows.

number (px)default 220 / 280 / 24

CardStack children / top / step

Cards, where they stick and how far each edge shows.

ReactNode / number / numberdefault 96 / 14

TiltWall items / columns / duration / height

Tiles spread over drifting columns.

ReactNode[] / number / number / numberdefault 4 / 40 / 480

DotGlobe size / dots / markers / speed / tilt

Canvas globe; speed in degrees per second.

number / number / { lat, lon, label? }[] / number / numberdefault 360 / 1400 / [] / 8 / 18

Accessibility

  • FlipCard with trigger="click" is a toggle button (aria-pressed); the hidden face is inert, so focus never lands on it.
  • Carousel3D is a labelled carousel region; only the front slide is reachable, and the position is announced politely.
  • Reduced motion swaps the turn for an instant change, keeps the stack flat, stops the wall and the globe.
  • TiltWall reads each tile once: the loop copy is hidden and inert.
  • DotGlobe is a named image listing its markers; drag or arrow keys turn it.