Révélation au scroll par crans — trois variantes (rise, fade, wipe),
cascade automatique des enfants avec data-dk-stagger.
<div data-dk="reveal" data-dk-variant="rise" data-dk-stagger="90">…</div>
Le texte est découpé lettre par lettre, chaque caractère monte en cascade crantée. Le texte original reste lisible par les lecteurs d'écran (aria-label).
LETTRE PAR LETTRE.
<h2 data-dk="split">LETTRE PAR LETTRE.</h2>
Décodage dot-matrix : le texte émerge de glyphes de points, de gauche à
droite. Au scroll, ou au survol avec data-dk-trigger="hover" — essayez ci-dessous.
SURVOLEZ-MOI.
<p data-dk="scramble" data-dk-trigger="hover">SURVOLEZ-MOI.</p>
Odomètre cranté : 24 ticks vers la valeur cible, déclenché à l'entrée à l'écran.
<span data-dk="counter" data-dk-to="1327"></span>
Ticker infini généré depuis un contenu unique : duplication automatique jusqu'à couvrir la largeur, vitesse en px/s, pause au survol.
<div data-dk="marquee" data-dk-speed="80"><span>CONTENU ●</span></div>
Le bouton est attiré par le curseur — mais par crans de 4 px : l'aimantation « saute », elle ne glisse pas. Retour sec au repos. Souris uniquement.
<button data-dk="magnetic" data-dk-strength="14">…</button>
Inclinaison 3D par paliers de 1,5° — le « mechanical tilt » : la carte s'incline comme un plateau sur rotule crantée, pas comme un chiffon.
<div data-dk="tilt" data-dk-max="6">…</div>
Le point violet qui vous suit devient un viseur carré sur l'interactif — et il laisse derrière lui une traînée de points posés sur une grille de 12 px, qui s'éteignent par paliers. Activés ici via les attributs du script. Un élément peut afficher un mot à côté du viseur :
<script src="dotkit.js" data-dk-cursor data-dk-trail></script> <button data-dk-cursor-label="CLIQUER">…</button>
Une trame de points en fond de bloc — les points s'écartent sous le curseur. Statique au tactile et en reduced-motion.
LA TRAME EST VIVANTE.
Déplacez la souris dans ce cadre.
<div data-dk="grid">…contenu…</div>
Décalage vertical quantifié par crans de 8 px, borné à ±60 px — jamais de détournement du scroll. Et les modules « télémétrie » : progress (la barre en haut de cette page), clock (l'horloge de l'en-tête).
<div data-dk="parallax" data-dk-speed="0.25">…</div> <div data-dk="progress"></div> <span data-dk="clock"></span>