Clododesign

Confetti Arcade — landing page Pop Art générative en CSS pur (Y2K Candy)

★ Pop Art · Y2K Candy · CSS pur

Confetti Arcade

La landing page qui explose en confettis au premier clic. Pop Art, Y2K candy, énergie de cour de récré — et pas une seule librairie pour y arriver.

→ Clique sur les lettres et le bouton : la page éclate de confettis, en 60 fps, sans le moindre script lourd.

La technique derrière le design

Toute la joie de cette page tient dans du code natif. Aucune librairie, aucun CDN, aucune image lourde : les confettis, les rebonds et la mascotte sont faits en CSS pur, SVG SMIL et un soupçon de JavaScript vanilla. Les explosions sont déclenchées au clic et animées par le moteur du navigateur — d’où les 60 fps garantis, même sur mobile. La direction artistique croise le Pop Art, l’esthétique Y2K candy et la palette acidulée d’une salle d’arcade : jaune solaire, cyan électrique, magenta festif. Tout est déterministe (graine « CFAC »), donc reproductible. Fichier unique autonome : un seul bloc HTML à coller, zéro dépendance.

Idéal pour

Événements & festivalsEdTech gamifiéeGaming mobileMarques pour enfantsFood & confiserieStudio créatifLancement de produit ludique

Palette — arcade acidulée

Jaune #FFD600
Cyan #00D4FF
Magenta #FF3399
Vert #44FF66
Orange #FF6B00
Surface #FFFDE7
Encre #0A0A0A

Questions fréquentes

Vraiment zéro librairie ?

Oui. Pas de canvas, pas de moteur physique, pas de framework : uniquement du CSS, du SVG SMIL et quelques lignes de JavaScript vanilla pour déclencher les explosions au clic. C’est ce qui garantit la légèreté et les 60 fps sur tous les appareils.

Les confettis sont-ils générés ou pré-dessinés ?

Générés. Chaque éclat est positionné et coloré par le code à partir d’une graine déterministe, puis animé par le navigateur. Rien n’est une vidéo ou un GIF : la composition est recalculée à chaque interaction.

Est-ce intégrable et personnalisable ?

Oui. C’est un fichier unique autonome (un bloc HTML, intégration en 5 minutes), sans librairie ni CDN. Couleurs, textes, mascotte et densité de confettis se règlent en quelques variables CSS.

Ce que vous recevez

Le kit complet : widget autonome (un seul fichier, intégration en 5 minutes), fragment WordPress copier-coller, art génératif injectable, charte design (couleurs, typographie, tokens) et documentation. Usage commercial illimité.

Voir toute la collection → Tout l’art génératif