CatBut — Tiltstatic · pendulum · sweep · spin

Tilt.tsx · mode='static'

Static — angle fixe

mode="static" angle={n} — inclinaison figée, aucun requestAnimationFrame

-30°

angle=-30

-15°

angle=-15

-5°

angle=-5

angle=0

angle=5

15°

angle=15

30°

angle=30

angle interactif — glissière

15°
-90°90°15°

Cas d'usage — cartes et icônes inclinées à des angles différents

🃏

angle=-6

légère inclinaison

🎴

angle=8

carte retournée

angle=-45

pastille

angle=45

losange

BAN

angle=-12

badge penché

LIVE

angle=20

texte incliné

Tilt.tsx · mode='pendulum'

Pendulum — oscillation sinusoïdale continue

mode="pendulum" angleFrom={n} angleTo={n} speed={°/s} — va-et-vient fluide à vitesse constante

🕰️

angleFrom=-5 angleTo=5

balancement doux

angleFrom=-20 angleTo=20

amplitude forte

🌊

speed=10

très lent

🔔

speed=80

rapide

🎵

asymétrique

from=-3 to=18

~

Box inclinée

Pendulum interactif — ajuste amplitude et vitesse

angleFrom-12
angleTo12
speed (°/s)30

Tilt.tsx · mode='sweep'

Sweep — trajet unique de A vers B

mode="sweep" — s'anime une seule fois de angleFrom vers angleTo, puis se fige

🚀

from=0 to=30

inclinaison intro

🍂

from=-45 to=0

retombée

!

speed=180

rapide

🌅

speed=15

très lent

(key=0 — un nouveau key force le remontage du composant)

Tilt.tsx · mode='spin'

Spin — rotation continue en boucle

mode="spin" turns={n} direction="cw|ccw" speed={°/s} — tourne à l'infini

cw · speed=90

1 tour/4s

ccw · speed=90

sens antihoraire

🌀

speed=360

1 tour/s

🌍

speed=30

très lent

⚙️

turns=3

3 tours / boucle

!

speed=720

turbo

Spin interactif

direction
speed (°/s)180
turns1

1 boucle = 1 tour = 2.00s

Tilt.tsx

Composition — Tilt imbriqués & cas concrets

Tilts imbriqués — effet de parallaxe combiné

🎪

pendulum + static

pendule incliné

☸️

spin + static

roue orientée

pendulum lents

3 amplitudes

Grille de logos — chaque carte a un Tilt statique différent

⚛️
React
Next.js
🟦
TypeScript
🐳
Docker
🟢
Node.js
🐘
PostgreSQL

CatBut · Tilt · static · pendulum · sweep · spin