Static Noise
Neige de télé sans antenne dessinée en canvas, lignes de balayage, barre qui descend et « NO SIGNAL » qui grésille : l'écran sans signal, au pixel près.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'écran .tvn-screen (280×180 px, fond #0a0a0a, coins de 8 px) empile quatre couches. Au fond, le canvas .tvn-canvas : à chaque image, le script donne à chacun de ses pixels un gris tiré au hasard, puis l'affiche à 40 % d'opacité. Par-dessus, .tvn-lines trace une ligne sombre tous les 2 px, et .tvn-bar, un trait clair de 3 px, descend du haut en bas en 0,5 s. Enfin le texte .tvn-text (« NO SIGNAL », police à chasse fixe) porte un halo blanc et deux décalages rouge et cyan, et vacille légèrement (opacité de 0,95 à 1 toutes les 0,1 s).
Le canvas prend la taille de l'écran multipliée par la densité de l'écran (plafonnée à 2) : la neige reste fine sur un écran Retina. Un ResizeObserver le redimensionne quand l'écran change de taille. La neige est redessinée au plus 60 fois par seconde (data-fps), même sur un écran à 120 Hz, et plus du tout quand l'écran est hors de vue ou l'onglet caché (mesuré : 0 image calculée en 2 s hors écran).
Chaque .tvn-screen a son propre canvas et sa propre boucle : deux copies sur une page neigent chacune de leur côté (mesuré dans Chromium 151, Firefox 153 et WebKit 26.5). Le tirage utilise un petit générateur rapide (xorshift) au lieu de Math.random(), pour tenir la cadence sur les grands écrans.
Un élément placé dans .tvn-screen sans position (ni absolute ni relative) se dessine sous la neige : la variable --tvn-opacity règle alors à quel point il est brouillé. C'est ce que fait l'exemple de l'escape game.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la neige est dessinée une seule fois et reste figée, la barre de balayage est masquée et le texte ne vacille plus. L'écran « sans signal » reste lisible tel quel. - Photosensibilité : la neige change à chaque image, mais pixel par pixel : la luminosité moyenne reste constante, aucune zone ne flashe (mesure image par image, bien en dessous du seuil WCAG 2.3.1). Le vacillement du texte ne dépasse pas 5 % d'opacité.
- Lecteurs d'écran : canvas, lignes et barre portent
aria-hidden="true"; seul le texte de.tvn-textest lu. Écrivez-y une phrase utile (« Épisode disponible vendredi ») plutôt qu'un simple « NO SIGNAL » si l'écran porte une information. - Clic et toucher : toutes les couches ont
pointer-events: none; l'effet n'intercepte rien.
Compatibilité navigateur
Canvas 2D (putImageData), variables CSS, inset et 2 Ko de JavaScript. Version minimale fixée par inset d'après les données MDN (Chrome 87, Firefox 66, Safari 14.1). ResizeObserver et IntersectionObserver sont testés avant usage. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5, et à densité 2 (canvas deux fois plus fin).
Sans JavaScript, l'écran reste noir avec ses lignes, sa barre et son texte : pas de neige. Sans ResizeObserver, le canvas suit le redimensionnement de la fenêtre seulement.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0260-root">
<div class="tvn-screen" data-fps="60">
<canvas class="tvn-canvas" aria-hidden="true"></canvas>
<div class="tvn-lines" aria-hidden="true"></div>
<div class="tvn-bar" aria-hidden="true"></div>
<span class="tvn-text">…</span>
</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 |
|---|---|---|
--tvn-w / --tvn-h |
280px / 180px |
Taille de l'écran ; le canvas suit. 100% pour remplir le conteneur (donnez une hauteur à la racine avec --tvn-root-h). |
--tvn-opacity |
.4 |
Densité de la neige. Vers .9 elle couvre tout ce qui est dessous, vers .1 ce n'est plus qu'un voile. |
data-fps (sur .tvn-screen) |
60 (1 à 60) |
Nombre de tirages de neige par seconde. 20–30 suffit pour une petite vignette et soulage les téléphones. |
--tvn-bg |
#0a0a0a |
Fond de l'écran, visible entre les grains. |
--tvn-text-size |
1.2rem |
Taille du texte .tvn-text, à réduire dans une vignette. |
--tvn-radius |
8px |
Arrondi des coins de l'écran. |
--tvn-root-bg / --tvn-root-h |
#0a0a0f / 300px |
Fond et hauteur minimale de la racine ; transparent et 0 pour l'intégrer à votre mise en page. |
Texte (HTML — .tvn-text) |
« NO SIGNAL » | Remplacez-le par votre message, ou supprimez la balise pour une neige muette. |
FAQ
data-fps à 30 : la neige reste crédible. Hors écran, rien n'est calculé.hidden) au début du chargement et masquez-la à la fin. Masquée, elle ne calcule rien ; affichée, elle se met à la bonne taille et neige aussitôt. C'est le principe de l'exemple du zapping.pixels[i] = 0xff000000 | gray << 16 | gray << 8 | gray écrit le même gris dans les trois canaux. Pour une neige bleutée, gardez le bleu plein et réduisez les autres, par exemple (gray >> 1) << 8 | (gray >> 1) pour le vert et le rouge.
