Séance Cursor
La planchette Ouija suit le curseur sur la planche, les glyphes proches s'illuminent en vert spectral et un fil fantôme trace le trajet. Canvas + DOM.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Curseurs comprend 26 effets, dont 1 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La planche est un conteneur .sea-scene avec cursor: none. Les lettres et chiffres (.sea-glyph) sont des <span> créés dynamiquement depuis chaque ligne [data-sea-row] : le texte est découpé par espaces et chaque token devient un .sea-glyph indépendant. La planchette est un div.sea-planchette positionné en absolute, repositionné à chaque pointermove par style.left et style.top.
À chaque frame de la boucle requestAnimationFrame, updateGlyphs() lit la position de chaque .sea-glyph via getBoundingClientRect(), calcule la distance au curseur (Math.hypot) et dérive un facteur k = max(0, 1 − d/RADIUS) (RADIUS = 120 px). Ce facteur pilote l'opacity (0,5 + 0,5 k), la color interpolée de or vers blanc verdâtre, le textShadow vert spectral et le scale (1 + 0,35 k) — tout appliqué en ligne sans classe ni transition CSS.
Le fil spectral est dessiné sur un <canvas> (z-index: 1) en mode globalCompositeOperation: 'lighter' : les points de trajectoire stockés dans trail[] sont reliés par des segments dont l'épaisseur (2 + a × 5) et l'alpha decroissent ensemble (a -= 0.012 par frame). Le tableau est plafonné à 60 points ; les points trop vieux (alpha ≤ 0) sont purgés. Sous prefers-reduced-motion, la boucle ne démarre pas et la planchette est masquée.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la boucle d'animation n'est pas démarrée et le fil lumineux n'est pas tracé. La planchette continue de suivre le curseur etupdateGlyphs()est appelé à chaquepointermove— les glyphes s'illuminent au passage sans animation fluide. Note :cursor: nonereste actif ; la planchette remplace visuellement le curseur système. - Sémantique :
.sea-corners,.sea-boardet.sea-hintportentaria-hidden="true"— la planche est purement décorative. Aucun élément interactif ne figure dans la planche. - Clavier : l'effet ne réagit pas au clavier. Si la planche sert d'interface de jeu, prévoir un mécanisme de navigation clavier indépendant de l'effet.
- Tactile :
pointermovecapture les glissements tactiles. Sur mobile, la planchette suit le doigt et les glyphes s'illuminent. - Contraste : les glyphes à l'état de repos ont une opacité de 0,55 sur fond sombre. Sur un fond clair, s'assurer que la couleur or (
#c9a24a) conserve un ratio de contraste suffisant (3:1 minimum pour un composant décoratif).
Compatibilité navigateur
Canvas 2D et DOM, aucune dépendance. Math.hypot disponible depuis Chrome 38, Firefox 27, Safari 8. getBoundingClientRect universel. globalCompositeOperation: 'lighter' disponible dans tous les navigateurs modernes. Non vérifié sur Safari réel ; attendu complet.
Sans JavaScript, la planche s'affiche avec les lettres statiques (opacité 0,55) et la planchette à sa position initiale hors-écran (−100 px). Le texte « OUI/NON » et « AU REVOIR » reste lisible. Sans requestAnimationFrame (cas théorique), l'effet ne démarre pas.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0806-root">
<div class="sea-scene" data-sea="">
<canvas class="sea-canvas"></canvas>
<div class="sea-corners" aria-hidden="true">
<span class="sea-word">OUI</span>
<span class="sea-word">NON</span>
</div>
<div class="sea-board" aria-hidden="true">
<div class="sea-row" data-sea-row="">A B C D E F G H I J K L M</div>
<div class="sea-row" data-sea-row="">N O P Q R S T U V W X Y Z</div>
<div class="sea-row" data-sea-row="">1 2 3 4 5 6 7 8 9 0</div>
<div class="sea-row"><span class="sea-word">AU REVOIR</span></div>
</div>
<div class="sea-planchette" data-sea-planchette=""></div>
<div class="sea-hint" aria-hidden="true">Invoquez en déplaçant le curseur…</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Rayon de lueur — variable JS RADIUS |
120 px | Réduire à 70 pour un halo très concentré autour du curseur ; augmenter à 200 pour des illuminations perceptibles à plus grande distance. La valeur est lue à chaque frame, modifiable dynamiquement. |
Fond de scène — CSS sur .sea-scene |
radial-gradient(circle at 50% 45%, #2a2113, #0b0805 75%) |
Remplacer par un autre gradient sombre pour adapter la teinte de la planche (violet, bleu nuit, rouge profond). |
Couleur des glyphes — CSS sur .sea-glyph |
color: #c9a24a (or) |
La couleur de base peut être changée à la main ; le JS interpolera toujours vers rgb(255, 255, 174) (blanc verdâtre) au passage du curseur. Pour changer la couleur d'illumination, modifier les calculs RGB dans updateGlyphs(). |
Couleur et taille de la planchette — CSS sur .sea-planchette |
64×64 px, vert spectral | Réduire à 48×48 pour un curseur discret ; passer à 80×80 pour un curseur très visible. Changer border-color et box-shadow pour une planchette rouge, violette ou dorée. |
Couleur du fil spectral — constante JS rgba(124,255,170,…) |
vert spectral | Modifier la constante couleur dans la boucle de dessin du fil (ctx.strokeStyle = 'rgba(…)') pour un fil rouge sang (220,30,30), bleu éther (80,180,255) ou or pâle. |
Mots affichés — contenu HTML de [data-sea-row] |
A–Z, 0–9, OUI/NON, AU REVOIR | Remplacer ou compléter les lignes par n'importe quels caractères séparés par des espaces : symboles runiques, émojis, chiffres romains, lettres cyrilliques. Chaque token devient un .sea-glyph indépendant. |
Texte d'invitation — .sea-hint |
"Invoquez en déplaçant le curseur…" | Remplacer ou masquer avec .sea-hint { display: none }. Le hint est aria-hidden et n'a aucune fonction. |
FAQ
data-sea-row : le JS découpe par espaces et crée un .sea-glyph par token. Vous pouvez ajouter des symboles, des émojis ou substituer l'alphabet latin par un autre système d'écriture (cyrillique, runique, etc.). Les glyphes inconnus du navigateur seront rendus via la police de repli ; leur taille de cellule suit le même clamp que les lettres.PointerEvent synthétique sur la .sea-scene : scene.dispatchEvent(new PointerEvent('pointermove', { clientX: x, clientY: y, bubbles: true })). Cela repositionne la planchette et déclenche la mise à jour des glyphes exactement comme un vrai mouvement. Utile pour des séquences automatiques — un compte à rebours qui « épelle » un mot en faisant défiler la planchette de lettre en lettre.[data-sea] est initialisé indépendamment : sa planchette, son canvas et ses glyphes sont propres à l'instance. Les deux planches peuvent être actives simultanément avec des couleurs ou des alphabets différents. Les variables mx/my/trail sont locales à chaque closure — aucune interaction entre instances.
