Playground technique

Huit micro-interactions codées en JS vanilla et SCSS, sans librairie.

Cette page n'a rien de commercial : c'est une démonstration technique. Chaque fiche détaille le problème résolu et la compétence qu'il démontre, pas un argument de vente.

01

Démos interactives

Huit animations : cinq en JS vanilla, trois en SCSS pur.

Elements
<h3 class="lab-card-title">
<span class="lab-tag">
<p class="lab-card-desc">
Survolez une ligne ou le texte

DOM Inspector vivant

JS

Une fausse interface DevTools reflète le DOM réel de la card. Survolez une ligne ou un élément : l'autre s'illumine.

Compétence : correspondance bidirectionnelle entre un élément réel et sa représentation, la même logique que l'inspecteur d'un vrai navigateur.

Déplacez la souris dans la zone

Magnetic button

JS

Le bouton attire la souris dans un rayon de 110px. Distance euclidienne + lerp sur translateX/Y.

Compétence : calcul de distance euclidienne en temps réel et interpolation (lerp) pour un mouvement fluide borné à un rayon précis.

Bougez la souris

Survolez la card

3D Tilt card

JS

Rotation 3D selon la position curseur. rotateX/Y depuis getBoundingClientRect + perspective CSS.

Compétence : conversion d'une position de curseur en angles de rotation, avec détection tactile pour proposer une alternative adaptée plutôt qu'un effet inutilisable au doigt.

0 Perf score
0 % Responsive
0 Page builder
Au chargement

Counter animation

JS

Chiffres animés au chargement. Easing ease-out cubic via requestAnimationFrame.

Compétence : interpolation temporelle avec fonction d'easing recalculée à chaque frame, sans dépendre d'une librairie d'animation.

Au chargement

Stagger reveal

SCSS

Apparition en cascade pure CSS. animation-delay: calc(var(--i) * 120ms) sur chaque enfant.

Compétence : orchestration de délais en cascade via une variable CSS par élément, et redémarrage propre d'une animation déjà terminée (reset forcé du rendu).

  • .btn { color: white; }
  • button { color: grey; }
  • .svc-card .cascade-target { color: var(--accent); }
Automatique

CSS Cascade Visualizer

JS

Plusieurs règles ciblent le même bouton ; la règle gagnante (spécificité la plus forte) est indiquée, les autres barrées.

Compétence : comprendre et expliquer la cascade et la spécificité CSS, la cause la plus fréquente de "ce style ne s'applique pas".

$ |
Automatique

Typewriter

SCSS + JS

Texte tapé caractère par caractère. setTimeout récursif humanisé + curseur @keyframes blink.

Compétence : simulation d'une frappe humaine par délais aléatoires bornés, via une boucle récursive asynchrone qui ne bloque pas le thread principal.

WordPress Thème Plugin WooCommerce CSS DOM
Survolez un nœud

Dependency Graph WordPress

JS

WordPress → thème / plugin / WooCommerce → CSS → DOM. Survoler un nœud illumine sa chaîne de dépendances.

Compétence : comprendre l'ordre de chargement et les dépendances réelles d'une pile WordPress, utile pour diagnostiquer un conflit.

Voir le code, discuter du reste

Ces démos sont représentatives de la façon dont j'écris du JS et du CSS au quotidien : sans librairie, avec un objectif technique clair derrière chaque effet.

Voir mes projets → Me contacter