Gratuit dans App Studio · Aucun code · Zéro impact sur la vitesse

Vos pages prennent vie — gratuitement

70 fonds animés spectaculaires intégrés dans chaque projet App Studio. Aurores, feu, pluie, planètes, organismes vivants, effets holographiques — choisissez-en un, ajustez vos couleurs, publiez. C'est tout.

Commencer gratuitement Découvrir App Studio
70
Effets
5
Niveaux
25
Shaders WebGL
6
Simulations physiques
Préréglages
0
Ligne de code

Aperçus en direct — chaque effet

Chaque carte que vous voyez est une vraie animation qui tourne dans votre navigateur en ce moment.

AuroreNiveau 1
ParticulesNiveau 1
Dégradé mailléNiveau 1
Bulles dégradéesNiveau 1
Géométrique radialNiveau 1
Champ de fluxNiveau 1
KaléidoscopeNiveau 2
ConstellationNiveau 2
NeigeNiveau 2
Pulsation néonNiveau 2
MandalaNiveau 2
ConfettisNiveau 2
Grille hexagonaleNiveau 2
🌊
VoronoïNiveau 2
〰️
Grille de formes d'ondeNiveau 2
🌀
SpirographeNiveau 2
🔥
BraisesNiveau 2
LuciolesNiveau 2
Poussière d'étoilesNiveau 2
💨
FuméeNiveau 2
🧬
Double hélice ADNNiveau 2
🧲
Lignes magnétiquesNiveau 2
🌊
Courant océaniqueNiveau 2
🌋
Lampe à laveNiveau 2
💡
Ondulation curseurNiveau 2
🔦
Projecteur curseurNiveau 2
⌨️
Caractères dactylographiésNiveau 2
🌅
Horizon coucher de soleilNiveau 2
☯️
Géométrie sacréeNiveau 2
🌬️
Lignes de ventNiveau 2
🌊
Flux de couleursNiveau 2
🖱️
Gravité curseurNiveau 2
🏔️
Parallaxe de défilementNiveau 2
Révélation au défilementNiveau 2
💥
Explosion au clicNiveau 2
🌀
Attraction au reposNiveau 2
🌌
Bruit de shaderWebGL
💧
Distorsion fluideWebGL
🫧
Diffusion-réactionWebGL
Métaballs GLWebGL
🌈
PlasmaWebGL
🔭
Zoom fractalWebGL
🌀
TunnelWebGL
🌪️
DéformationWebGL
📡
InterférencesWebGL
💎
CristallinWebGL
🌌
Aurore GLWebGL
🪩
Chrome liquideWebGL
🧊
Cristal liquideWebGL
🕳️
Trou noirWebGL
🏔️
Survol de terrainWebGL
🎨
Aberration chromatiqueWebGL
📺
GlitchWebGL
👾
HologrammeWebGL
☁️
Nuages volumétriquesWebGL
🌊
Caustiques aquatiquesWebGL
🌊
Coulée de laveWebGL
🌠
NébuleuseWebGL
🌊
Vagues océaniquesWebGL
🌲
Forêt en parallaxeWebGL
Marche SDFWebGL
⚛️
Particules gravitationnellesPhysique
🕸️
Réseau de ressortsPhysique
⏱️
Chaînes de pendulesPhysique
💦
Bassin liquidePhysique
🪐
Système orbitalPhysique
💥
Cascade de collisionsPhysique
🦠
Jeu de la vie de ConwayCellulaire
🎨
AC cycliqueCellulaire
🌍
AC multi-espècesCellulaire
Où l'utiliser

Page, section ou colonne — à vous de choisir

Vous n'êtes pas limité à une bannière héro. Appliquez un fond animé à n'importe quel niveau de votre page — toute la page, une section spécifique, ou même une seule colonne dans une rangée.

Fond de page complet

L'animation remplit toute la page derrière votre contenu. Idéal pour les pages d'atterrissage, portfolios et écrans d'accueil où vous souhaitez un effet immersif et percutant.

Fond de section

Appliquez l'animation à une seule section — un héro, un bloc de fonctionnalités, un appel à l'action. Le reste de la page reste propre et sobre. Le cas d'utilisation le plus populaire.

Colonne ou bloc

Animez une seule colonne dans une mise en page à deux colonnes, une carte de tarification, un bloc de mise en valeur. Utilisez-le comme accent qui attire l'œil exactement là où vous voulez.

Vitesse & SEO

L'approche d'animation qui ne nuit pas à votre score Google

La plupart des constructeurs de sites utilisent des animations CSS qui s'exécutent sur le thread principal, ralentissent les pages et sont pénalisées par Google. Le moteur canvas de TimingFlow fonctionne à un niveau entièrement différent — et ça se voit dans les scores PageSpeed.

Animations CSS
(la plupart des constructeurs)
Canvas TimingFlow
(cette bibliothèque)
Thread de rendu
Thread principal (bloque JS)
Thread compositeur (séparé)
Recalcul de mise en page
Oui — à chaque image
Zéro — ne touche jamais le DOM
Décalage cumulatif de mise en page (CLS)
Souvent mauvais (score > 0,1)
Toujours 0,00
Temps de blocage total (TBT)
Augmente (bloque l'interaction)
Aucun impact
Pénalité Google PageSpeed
Oui — cause fréquente de mauvais scores
Aucune
Se met en pause hors écran
Non — continue de tourner
Oui — automatiquement
Consommation batterie mobile
Élevée (toujours active)
Faible (pause hors écran)
0 ms
Ajouté au temps de chargement

Le moteur se charge une seule fois puis est mis en cache définitivement. Les pages suivantes se chargent sans aucun coût d'animation.

0,00
Score CLS garanti

Le canvas est positionné en absolu derrière votre contenu. Il ne décale, ne pousse ni ne redispose jamais un seul élément de votre page.

60 fps
Fluidité parfaite sur tout appareil

Rendu GPU direct. Le contenu de votre page et l'animation fonctionnent indépendamment — l'un ne ralentit jamais l'autre.

Possibilités infinies

Ces 70 effets ne sont que des points de départ

Chaque animation est fournie avec un panneau de configuration complet dans Animation Studio. La même Aurora dans vos couleurs de marque à mi-vitesse ne ressemble en rien à ce que vous voyez ici — et c'est précisément l'objectif.

Aurora — 4 palettes de couleurs différentes, même effet

Rêve océanique
Horizon de feu
Blanc arctique
Néon vif

Tous les contrôles disponibles dans Animation Studio :

Effet
Aurora Boréale
Palette de couleurs (jusqu'à 6 couleurs, n'importe quel hex)
+
VitesseMoyenne
Intensité70 %
Opacité85 %
Échelle1,2×
Nombre de particules120
Mode de fusion
Écran
Direction
↗ Haut-droite
Morphisme
Les formes évoluent avec le temps

Particules — même effet, résultats radicalement différents :

Couleurs marque, lent
Tons chauds, vibrant
Blanc sur fond sombre
Vert techno, dense
L'espace de combinaisons
70 effets× ∞ palettes× vitesse× intensité× opacité× échelle× mode de fusion× direction× nb. particules× morphisme on/off = des possibilités infinies

Ce que vous voyez dans la galerie est un préréglage par effet. Votre version, avec vos couleurs de marque et vos réglages, aura un aspect totalement unique.

Aperçu technique

Comment ces animations sont construites

Trois technologies de rendu — chacune choisie pour ce qu'elle fait de mieux. Ensemble, elles couvrent 70 effets visuellement distincts à 60fps sans aucun impact sur votre page.

Canvas 2D · 45 effets

Rastérisation 2D accélérée par le matériel via l'API Canvas native du navigateur. Boucle requestAnimationFrame, IntersectionObserver pour mettre en pause hors écran, zéro dépendance de framework. Bruit de valeur, fonctions de type Perlin, automates cellulaires, intégration de Verlet — tout codé à la main en JS vanille.

WebGL · 25 effets

Pipeline GPU complet — shaders GLSL vertex + fragment. Réaction-diffusion, simulation de fluide, ray-marching SDF, plasma, zoom fractal. Ces effets s'exécutent à 100% sur la carte graphique, ce qui explique leur rendu cinématographique sans aucune charge CPU sur votre page.

Physique & Cellulaire · 9 effets

Intégration de Verlet pour la physique de ressorts et pendules. Jeu de la vie de Conway, AC cyclique, AC multi-espèces pierre-papier-ciseaux — de vrais automates cellulaires à vitesse de simulation. Équations de réaction-diffusion Gray-Scott avec 3 étapes par frame pour des motifs de Turing visibles.

App Studio

Prêt à utiliser sur votre site

Sélectionnez n'importe quelle section dans App Studio, activez le bouton Arrière-plan animé, et ouvrez le Studio d'animation pour configurer votre effet. Aucun code. Aperçu en direct pendant la modification.

Commencer gratuitement Voir App Studio →