GlowCrack

GlowCrack fend un élément d'une fissure anguleuse d'où sort de la lumière, avec une lueur sur la surface autour. La fissure se forme quand l'élément apparaît, au survol, à la demande, ou au fil d'une valeur de progression. Son dessin suit la taille de l'élément et évite de lui-même le texte qu'il contient. Utilisez-la pour marquer un moment : un lancement, un titre, une page 404, une action principale.

Installation#

pnpm dlx shadcn@latest add https://o-ui.hd987.dev/r/glow-crack.json

GlowCrack n'a aucune dépendance npm. Il s'appuie sur deux primitives d'O-UI, FrameLoop et PointerTracker, que la commande installe avec lui dans des dossiers voisins. Ses adaptateurs utilisent seulement cn de @/lib/utils. Les prérequis communs à tous les composants (Tailwind CSS v4, React 19 ou Vue 3.5) sont décrits dans Installation.

Utilisation#

GlowCrack s'utilise de deux façons : il est lui-même la surface fissurée (une carte, un titre, l'enveloppe d'une image), ou il s'applique à votre propre élément par un hook (voir Utiliser sans enveloppe). Sans aucune option, la fissure part d'un bord et se forme quand l'élément entre dans l'écran.

import { GlowCrack } from "@/components/o-ui/glow-crack/glow-crack";

export function ReleaseCard() {
  return (
    <GlowCrack className="rounded-2xl border border-border bg-card p-8">
      <h3 className="text-2xl font-semibold">Something broke through.</h3>
      <p className="mt-2 text-muted-foreground">A new engine, rebuilt from the ground up.</p>
    </GlowCrack>
  );
}

Sur une carte claire (bg-card en thème clair), la fissure prend un autre rendu que dans l'aperçu : une fente dorée, peinte et creusée, car une lumière ne se voit pas sur du blanc (voir Thème clair et sombre). Pour retrouver la lumière de l'aperçu sur un site clair, ajoutez la classe dark à GlowCrack.

Quelques règles font la différence :

1. Choisissez le mode selon ce que l'élément contient.
   • surface, par défaut : la fissure est dans le fond de l'élément, sous son contenu. Le texte et les boutons restent nets par-dessus.
   • overlay : par-dessus tout. C'est le mode des images et des vidéos.
   • text : la fissure n'apparaît que dans les lettres. Réservez-le aux grands titres en gras, sur un bloc ou un inline-block.
2. Une image s'enveloppe. Une <img>, une <video> ou un <input> ne peuvent pas contenir la fissure : sur eux, GlowCrack ne fait rien, sans erreur. Posez-le autour, en mode overlay.
3. Laissez-le placer la fissure. Avec origin et angle à "auto" (par défaut), en mode surface, GlowCrack choisit le tracé qui croise le moins le texte de l'élément. Si vous les fixez, faites vous-même passer la fissure à côté du texte courant : sur la lumière, un petit texte perd en contraste.
4. Ni space-y-* ni divide-y sur GlowCrack. La fissure est dessinée dans un élément ajouté en dernier enfant : ces classes et les sélecteurs :last-child ne visent plus le bon élément. Préférez flex flex-col gap-*.
5. L'arrondi se pose sur GlowCrack. La fissure et sa lumière restent dans l'élément et suivent son arrondi.

Exemples#

Sur une image#

Une image ne peut pas porter la fissure : GlowCrack l'enveloppe et dessine par-dessus, en mode overlay. Deux fractures partent ici du bord haut (cracks: 2). Sur une image, la lumière s'ajoute toujours à ce qu'il y a dessous, quel que soit le thème. L'image elle-même n'est pas modifiée.

Bouton d'appel à l'action#

Le hook useGlowCrack (le composable du même nom en Vue) fissure votre propre bouton, sans enveloppe. Avec trigger: "hover", la fissure s'ouvre au survol et au focus clavier, puis se referme quand ils partent. Sur un écran tactile, elle se forme quand le bouton apparaît. Le dessin s'affine de lui-même à la taille d'un bouton ; branching: 0 garde une seule fracture nette.

Titre fissuré#

En mode text, la fissure ne passe que dans les lettres, et la lumière déborde de leurs bords. Sur des lettres claires, elle se lit comme un marbre fendu ; sur des lettres sombres, la lumière s'y ajoute. GlowCrack dessine dans une copie décorative du texte, posée exactement dessus : le titre reste un vrai titre, lu une seule fois.

Impact au clic#

Avec trigger: "manual", rien ne se forme avant un appel à crack(). Passé à crack(), l'événement du clic fait partir une nouvelle fissure du point touché. heal() la referme. Un clic au clavier n'a pas de position : la démo fait alors partir la fissure du centre.

Au défilement#

La prop progress, de 0 à 1, pilote la formation à la place du déclencheur. Ici, elle suit la position de la carte grâce au hook useViewProgress de ViewProgress, une primitive à installer en plus. La plage va de entry 30% (30 % de la carte entrée par le bas) à contain 20% (peu après qu'elle est entièrement visible). La fissure s'ouvre pendant que la carte entre, et se referme si l'on remonte.

Personnalisation#

Les réglages se regroupent en trois familles :

• La forme. seed tire une autre fissure. origin et angle placent la fracture principale, length la prolonge, cracks en ajoute depuis le même point. width règle l'ouverture, roughness le nombre de cassures, branching les branches et les éclats.
• La lumière. colors la colore : la première couleur la remplit, les autres circulent dedans. intensity règle l'éclat, glow et spread la lueur sur la surface, depth l'ombre qui creuse la fente.
• La vie. breathe fait varier l'éclat, drift déplace les couleurs, boost et proximity règlent la réaction au pointeur.

La taille suit l'élément. width et spread sont donnés en pixels pour une carte moyenne (environ 400 × 240). Sur un bouton, l'ouverture, la lueur et les facettes s'affinent ; sur un hero, elles s'élargissent. Cette adaptation est volontairement moins que proportionnelle : un bouton garde une fente lisible, un hero n'a pas une tranchée. scale la remplace par un facteur fixe : à 1, width et spread sont pris tels quels, en pixels.

Combinaisons prêtes à copier, à placer sur la même carte que l'aperçu. En Vue, écrivez :colors="[…]" et :intensity="1.2".

// Magma: wider, rougher and hotter.
<GlowCrack colors={["#ff7a2e", "#ffd08a", "#ff3d2e"]} intensity={1.2} glow={0.9} width={5} roughness={0.65} spread={34} />

// Cold energy: calm facets, many branches, moving light.
<GlowCrack colors={["#8fd3ff", "#e6f6ff", "#a78bfa"]} roughness={0.3} branching={0.75} drift={0.8} breathe={0.45} />

// Still light: no continuous motion, no pause control needed.
<GlowCrack breathe={0} drift={0} />

Dans la démo, chaque carte fixe aussi origin, angle et length pour garder sa fissure dans le haut de la carte. Sans eux, l'évitement automatique du texte s'en charge.

Intégration#

Next.js et Nuxt#

• Next.js. Le fichier React de GlowCrack commence par "use client" : vous pouvez l'importer depuis un composant serveur. Un fichier qui lui passe onStart, onComplete, actionsRef ou une ref, ou qui appelle useGlowCrack, doit commencer lui aussi par "use client".
• Rendu serveur. Il produit l'élément et son contenu, sans la fissure. Elle est ajoutée au navigateur, sans écart d'hydratation.
• Nuxt. Le composant s'utilise tel quel : la fissure n'est créée qu'au montage.

Contrôle programmatique#

La fissure se pilote par crack(), heal() et replay(). onStart et onComplete (en Vue, les événements start et complete) signalent le début et la fin de chaque formation.

"use client";

import { useRef } from "react";
import { GlowCrack, type GlowCrackActions } from "@/components/o-ui/glow-crack/glow-crack";

export function Vault() {
  const actions = useRef<GlowCrackActions>(null);
  return (
    <GlowCrack
      actionsRef={actions}
      trigger="manual"
      onComplete={() => console.log("open")}
      className="rounded-2xl border bg-card p-8"
    >
      <button
        type="button"
        // A keyboard click has no position: crack from the center.
        onClick={(event) => actions.current?.crack(event.detail === 0 ? { x: 0.5, y: 0.5 } : event)}
      >
        Break it
      </button>
    </GlowCrack>
  );
}

• crack() sans argument forme la fissure avec sa forme actuelle ; sur une fissure déjà ouverte, il ne fait rien.
• Avec un événement (tout objet qui a clientX et clientY) ou un point en fractions de la boîte ({ x: 0.5, y: 0.5 }), crack() tire une nouvelle fissure depuis ce point et la forme depuis zéro, même pendant une formation.
• heal() referme la fissure en sens inverse. replay() la referme d'un coup, puis la forme de nouveau. Une fissure refermée par heal() le reste : le déclencheur visible ne la reforme pas.
• Tant que progress est un nombre, ou que disabled est vrai, ces appels n'ont pas d'effet. onStart et onComplete ne sont pas appelés quand progress pilote la fissure.

GlowCrack écrit aussi son état sur l'élément, dans data-crack : closed, opening, open ou closing. Il se lit en CSS, par exemple pour faire passer un texte en text-foreground une fois la fissure ouverte : data-[crack=open]:text-foreground sur l'élément, ou group-data-[crack=open]:text-foreground sur un enfant, avec group sur GlowCrack. Ne cachez pas de contenu en attendant cet état : sans JavaScript, il ne viendrait jamais.

Mettre en pause toutes les animations#

La pause commune de FrameLoop arrête d'un coup toutes les animations continues de la page, fissures comprises. Reliez-la à un interrupteur visible, par exemple dans l'en-tête du site.

"use client";

import { useAnimationsPaused } from "@/components/o-ui/frame-loop/frame-loop";
import { setAnimationsPaused } from "@/components/o-ui/frame-loop/frame-loop-core";

export function MotionToggle() {
  const paused = useAnimationsPaused();
  return (
    <button type="button" aria-pressed={paused} onClick={() => setAnimationsPaused(!paused)}>
      Pause animations
    </button>
  );
}

La pause fige la respiration et la dérive des couleurs. Une formation en cours se termine, et la lumière réagit encore au pointeur. La prop paused fait de même pour une seule fissure.

Thème clair et sombre#

Avec tone à "auto", GlowCrack choisit son rendu d'après ce qui est peint derrière lui :

• en mode surface, le fond de l'élément et de ses ancêtres, fonds translucides compris (une carte bg-white/5 sur une page sombre reste sombre) ;
• en mode text, la couleur du texte ;
• en mode overlay, toujours le rendu sombre : la lumière s'ajoute à l'image.

Sur une surface sombre, la lumière s'ajoute à ce qu'il y a dessous. Sur une surface claire, une lumière ajoutée ne se verrait pas : la fente est peinte, plus saturée, avec une ombre plus marquée. Un changement de thème (classe ou data-theme sur <html>, réglage du système) est suivi en direct. tone: "dark" ou tone: "light" impose l'un des deux rendus, par exemple sur une image de fond posée en CSS, que GlowCrack ne peut pas lire.

Pour une surface sombre dans les deux thèmes, comme dans les exemples, ajoutez la classe dark à GlowCrack : les jetons du thème y prennent leurs valeurs sombres (bg-card, text-card-foreground).

Utiliser sans enveloppe#

Pour fissurer un élément de votre propre composant, sans l'élément racine que pose GlowCrack, utilisez le hook useGlowCrack en React, ou le composable du même nom en Vue. Les options sont les mêmes.

"use client";

import { type ReactNode, useRef } from "react";
import { useGlowCrack } from "@/components/o-ui/glow-crack/glow-crack";

export function LaunchCard({ children }: { children: ReactNode }) {
  const cardRef = useRef<HTMLElement>(null);
  const actions = useGlowCrack(cardRef, { trigger: "manual" });
  return (
    <article ref={cardRef} className="relative isolate rounded-2xl border bg-card p-6">
      {children}
      <button type="button" onClick={() => actions.crack()}>
        Launch
      </button>
    </article>
  );
}

• La fissure est dessinée dans un élément ajouté en dernier enfant. Si votre framework réécrit le contenu de l'élément, elle revient à la frame suivante.
• GlowCrack pose isolation: isolate et, si besoin, position: relative sur l'élément ; ses styles d'origine reviennent au démontage. Posez vous-même relative isolate, comme dans ces exemples : la mise en page ne bouge alors pas quand le script arrive.
• Le hook et le composable acceptent une ref ou un élément (en Vue : un élément, une ref de template ou un getter, et des options en objet, ref ou getter). Une option retirée revient à sa valeur par défaut.

API#

Les nombres hors plage sont ramenés dans la plage. Une valeur invalide garde la valeur courante, ou la valeur par défaut à la création. Les couleurs invalides sont ignorées, comme les mots-clés inherit, initial, unset et revert, et celles au-delà de la sixième.

Les adaptateurs ajoutent as, l'élément racine : div (par défaut), span, section, article, aside, figure, li, p ou un titre de h1 à h6. Ils transmettent les attributs natifs, ainsi que className en React et class en Vue. En React, actionsRef reçoit les contrôles ; en Vue, la ref expose { el, crack, heal, replay }, et onStart et onComplete deviennent les événements start et complete.

En vanilla, createGlowCrack(element, options) renvoie une instance : update(options) ne change que les options passées, crack(point?), heal() et replay() pilotent la fissure, destroy() retire tout. Le hook et le composable useGlowCrack prennent les mêmes options et renvoient { crack, heal, replay }.

Accessibilité#

Ce que fait GlowCrack

• La fissure est décorative : les lecteurs d'écran l'ignorent, et elle ne capte pas le pointeur. GlowCrack n'ajoute ni rôle ni tabindex ; l'élément et son contenu gardent les leurs.
• En mode text, la copie qui porte la fissure est masquée aux lecteurs d'écran et inerte : le titre est lu une fois, sa sélection et ses liens restent ceux du vrai texte. La copie ne reprend ni les id, ni les noms de champs, ni la lecture automatique d'un média.
• Le focus clavier compte comme le survol, y compris sur un élément placé dans GlowCrack : avec trigger: "hover", il ouvre la fissure, et, hors du mode text, il avive la lumière. Le toucher n'agit pas comme un pointeur : sur un écran tactile, seule l'apparition forme la fissure.
• La lumière ne clignote pas : la respiration est lente (sous 0,4 Hz), et le seul éclat est celui de la fin d'une formation, une fois, en fondu.
• Rien ne tourne hors écran ni dans un onglet masqué.

Ce que vous devez faire

• Prévoir l'interrupteur de pause de la page (WCAG 2.2.2), sauf si la lumière est fixe : voir l'encadré de Utilisation. Le mouvement réduit du système ne le remplace pas : ce réglage ne concerne que les personnes qui l'ont activé.
• Garder le texte lisible : laissez l'évitement automatique faire son travail, ou placez la fissure à côté du texte courant. Réservez le mode text aux grands titres en gras.
• Ne pas confier une information à la fissure seule : un état ou un message doit rester visible sans elle.

Mouvement réduit. La formation devient un fondu de 0,2 s, comme la fermeture, sans révélation ni front de lumière. La lumière reste fixe : ni respiration ni dérive. Le pointeur et le focus avivent encore la lumière, en fondu, mais sans tache qui suit le curseur. La prop reducedMotion permet de forcer ce comportement ou de l'ignorer. Un changement du réglage système s'applique en direct.

Contraste élevé. En mode forced-colors, la fissure est masquée et le système dessine l'élément. Son état (data-crack) et ses rappels suivent leur cours. Elle réapparaît quand le réglage est désactivé.

Performances#

• Le cœur et ses fichiers annexes pèsent environ 12 kB minifiés et compressés, sans dépendance ; 13 kB avec FrameLoop et PointerTracker, partagés avec les autres éléments d'O-UI.
• Une fois formée, la lumière ne change que des positions et des opacités, que le navigateur compose sans redessiner la page. Pendant une formation, et tant que progress est entre 0 et 1, seule la révélation est redessinée.
• La fissure est dessinée une fois, à la création, puis quand la taille de l'élément s'est stabilisée après un redimensionnement : rien n'est recalculé pendant l'animation. Le nombre de points d'une fissure est borné, quelle que soit la taille de l'élément.
• Toutes les fissures d'une page partagent une seule boucle d'animation et un seul jeu d'écouteurs de pointeur. Une fissure hors écran, en pause, figée (breathe et drift à 0) ou dans un onglet masqué ne fait aucun travail.

Problèmes fréquents#

• La fissure n'apparaît pas. Avec trigger: "visible", elle se forme quand le haut de l'élément dépasse 85 % de la hauteur de l'écran, ou qu'il est entièrement visible. Vérifiez aussi que l'élément a une taille, qu'il ne s'agit pas d'une <img> (enveloppez-la), que disabled est faux et que progress n'est pas resté à 0.
• La fissure passe sous mon texte. origin ou angle sont fixés, ce qui coupe l'évitement automatique. Remettez-les à "auto", ou ajustez-les avec length.
• La lumière ne bouge pas. La page a appelé setAnimationsPaused(true), la fissure a paused, le système demande de réduire les animations, ou colors ne compte qu'une couleur (la dérive en demande deux).
• En mode text, la fissure est décalée ou absente. Le texte passe à la ligne dans un élément display: inline : passez-le en inline-block ou block. Un texte déjà en dégradé (background-clip: text) ou transparent ne peut pas non plus porter la fissure.
• Un menu déroulant placé dans GlowCrack passe sous les éléments voisins. GlowCrack crée un contexte d'empilement (isolation: isolate). Affichez le menu dans un portail.

Notes et limites#

• Le rendu utilise les masques CSS, mix-blend-mode: plus-lighter, color-mix() et background-clip: text. Il demande Chrome 120, Safari 16.2 ou Firefox 113, ou une version plus récente.
• GlowCrack pose isolation: isolate sur l'élément, et position: relative s'il est statique : un enfant en position: absolute se place donc par rapport à lui. Il écrit aussi data-crack. Tout revient à la destruction.
• La lumière reste dans l'élément et s'arrête à son bord, arrondi compris : elle ne déborde jamais sur la page.
• Au redimensionnement, la fissure suit l'élément : ses points se déplacent avec la boîte, et son ouverture suit sa taille. Une autre fissure n'est tirée que si une option de forme change, ou par crack() avec un point.
• L'évitement du texte mesure les lignes au moment où la fissure est tirée. Si des polices web sont en cours de chargement, une fissure pas encore apparue est retracée une fois qu'elles sont chargées. Si le texte change ensuite, la fissure garde son tracé.
• En mode text, la copie suit les changements du texte. Elle reprend le style de l'élément, pas un style posé sur un enfant au survol.
• Un élément sans taille ou masqué ne dessine rien. La fissure apparaît dès qu'il a une taille.