Créer un site à scroll façon Apple avec l'IA : le guide complet (2026)

Comment crée-t-on un site à scroll façon Apple avec l'IA ?

Réponse courte : vous décrivez le film que la page doit jouer — « un hero épinglé où une vidéo produit défile image par image quand je scrolle, des captions qui apparaissent sur cinq temps, sombre, lent, premium » — et un générateur de code IA l'écrit comme un vrai projet React : des timelines GSAP ScrollTrigger, une fondation de smooth scroll Lenis et un moteur de scroll-scrub qui mappe la position de scroll sur la lecture du média. Sur VULK (notre produit — transparence ci-dessous), cette boucle s'enchaîne prompt → code généré → aperçu en direct dans une microVM Firecracker → déploiement en un clic, et le résultat est du code source que vous exportez et possédez.

La demande derrière ce style n'est pas une vanité esthétique. Les utilisateurs qui arrivent sur VULK avec une intention immersive — scrollytelling, cinématique, 3D — se convertissent en clients payants à 20,4 %, six fois la moyenne de la plateforme, et 2 438 projets comportent des demandes explicites de 3D/WebGL (données de la plateforme VULK, juillet 2026). Les pages produit d'Apple ont entraîné une décennie de visiteurs à lire le storytelling piloté par le scroll comme « cette entreprise est sérieuse ». Ce guide couvre tout le métier : ce qui fait fonctionner le style, les cinq techniques derrière chaque page façon Apple, le workflow prompt-vers-site, six prompts complets à copier-coller (dont un scrub de séquence d'images en canvas et un hero cinématique épinglé), un comparatif honnête avec le code à la main, Webflow et Framer, la discipline de performance et le déploiement. Transparence : VULK est notre produit — là où une autre voie est le meilleur choix, nous le disons. Mis à jour le 18 juillet 2026.

Tableau comparatif : quatre façons de créer un site piloté par le scroll

La séparation structurelle : les builders visuels animent des éléments ; le style Apple réalise un film. Épingler une section sur 3 000 pixels de scroll pendant qu'une vidéo défile, que les captions se relaient et que la lumière évolue au fil des temps narratifs, c'est de la chorégraphie de timeline — la langue naturelle du code GSAP, pénible à assembler en clics dans une GUI. C'est pourquoi le sommet de ce genre est soit codé à la main par des studios, soit, depuis la génération par IA, écrit par un modèle et raffiné par prompt.

Pourquoi le style de scroll d'Apple fonctionne-t-il si bien ?

Trois mécanismes, tous empruntés au cinéma :

Le spectateur contrôle le projecteur. Dans une séquence scroll-scrub, le scroll EST la timeline. Rien ne se joue automatiquement contre le visiteur ; c'est lui qui tire l'histoire à son propre rythme, ce qui transforme le visionnage passif en interaction. Arrêtez de scroller et le film tient son image — ce seul comportement fait qu'une page semble conçue plutôt que décorée.

Épingler crée des scènes. Quand une section s'épingle au viewport pendant que le scroll progresse, la page cesse d'être une pile de blocs et devient une suite de scènes. Chaque scène épinglée gagne l'espace de faire un point — un angle produit, une fonctionnalité, une statistique — avant de libérer vers la suivante. Les pages produit d'Apple sont, en substance, six scènes épinglées à la suite.

Les temps remplacent les sections. Les meilleurs sites à scroll se lisent comme des temps narratifs numérotés — chaque temps déplace la lumière d'accent, l'échelle typographique et le ton émotionnel. Le générateur de VULK encode cela comme une discipline explicite, distillée à partir de showcases immersifs produits (héritage sportif, voyage de luxe, parfum, automobile, immobilier) : mouvement lent et délibéré, un film continu, jamais des blocs de site séparés.

Les cinq techniques derrière chaque page façon Apple

Chaque page de ce genre — celles d'Apple, les lauréats des Awwwards, les films de marques de luxe — est construite à partir de cinq techniques. Les cinq sont promptables.

1. La fondation de smooth scroll (Lenis + GSAP, une seule boucle). Le scroll natif se déclenche de façon irrégulière selon les navigateurs et périphériques d'entrée ; l'animation scrubbed expose chaque irrégularité. La configuration éprouvée est le smooth scroll Lenis piloté par le ticker de GSAP — une seule boucle requestAnimationFrame pour toute la page, avec ScrollTrigger synchronisé sur Lenis. La cause nº 1 des sites de scroll saccadés, ce sont deux boucles d'animation en concurrence ; le correctif est architectural, pas un réglage. VULK génère cette colle par défaut :

const lenis = new Lenis({ autoRaf: false });
lenis.on('scroll', ScrollTrigger.update);
const raf = (time: number) => lenis.raf(time * 1000);
gsap.ticker.add(raf);        // GSAP's ticker is the ONLY loop
gsap.ticker.lagSmoothing(0);

2. Les sections épinglées. ScrollTrigger avec pin: true maintient une section fixe pendant que la progression du scroll pilote une timeline — la caméra reste immobile, la scène change. Tout le reste de cette liste se passe à l'intérieur d'un pin.

3. Les médias scroll-scrub. La pièce maîtresse. Deux implémentations, toutes deux du vrai code :

• Scrub vidéo — un élément <video> dont le currentTime est réglé à chaque frame vers une cible lissée dérivée de la progression du scroll. Bien fait, cela demande un encodage short-GOP (des keyframes toutes les quelques frames) pour que le seeking soit instantané, un chargement en blob pour que le fichier soit entièrement seekable, et une coalescence des seeks pour que la file de seeks de Safari ne s'accumule jamais. VULK livre ce moteur comme pattern éprouvé et, sur le plan Pro, peut générer la vidéo cinématique elle-même avec des modèles vidéo IA, encodée spécifiquement pour le scrubbing.
• Séquence d'images en canvas — la technique classique d'Apple : 60–150 frames exportées, préchargées comme images, dessinées sur un <canvas> où la progression du scroll sélectionne l'index de frame. Plus lourde à héberger, mais exacte à l'image près sur tous les navigateurs et le bon choix quand vous avez une séquence rendue (un turntable 3D, un produit éclaté) plutôt qu'un fichier vidéo.

4. La chorégraphie de texte. Des titres qui s'assemblent mot à mot ou ligne à ligne quand leur temps arrive — GSAP SplitText, révélations en cascade, lignes masquées. La retenue compte plus que l'effet : une révélation chorégraphiée par temps se lit premium ; six se lisent comme un pack de transitions de diaporama.

5. La réalisation par temps. La couche que la plupart sautent : chaque temps de scroll déplace la lumière d'accent, le contraste et le rythme, pour que la page semble étalonnée comme un film. C'est de la direction artistique exprimée en code — des dégradés de fond liés à la progression de la timeline, des captions qui apparaissent à des fractions de scroll définies, un temps final qui atterrit sur le CTA.

À quoi ressemble le workflow prompt-vers-site-à-scroll ?

1. Briefez le film, pas la maquette. Écrivez le prompt comme un traitement de réalisateur : le sujet, les ancres d'ambiance (« documentaire Netflix × musée de luxe »), le nombre de temps, ce que chaque temps montre et où atterrit le CTA. Des temps précis en entrée, un film cohérent en sortie.

2. Génération. L'IA planifie la structure narrative, puis écrit le projet : fondation Lenis + GSAP, scènes épinglées, moteur de scrub, révélations SplitText et le calendrier des captions temps par temps — en une seule base de code React + Vite + TypeScript.

3. Aperçu en direct. Le projet démarre dans une microVM Firecracker avec hot reload. Vous scrollez la vraie page en une ou deux minutes — sur 11 355 apps générées, le builder médian publie son premier projet fonctionnel 47 secondes après l'inscription (données de la plateforme VULK, juillet 2026).

4. Itérez par prompt. « Ralentis le temps 3 de moitié. » « Les captions doivent être alignées à gauche sur les temps pairs. » « Plus de contraste dans la scène finale. » Chaque suivi édite la timeline concernée, pas tout le site.

5. Descendez dans le code quand vous voulez. Tout est du code source standard — ajustez une courbe d'easing à la main, remplacez le fichier vidéo ou confiez le projet à un développeur. Pas de runtime propriétaire, pas d'embed.

6. Déployez. Un clic vers l'edge de Cloudflare, ou exportez le ZIP / poussez sur GitHub et hébergez partout où un build statique tourne.

6 prompts complets à copier-coller pour des sites à scroll façon Apple

Des prompts complets, pas des fragments — collez n'importe lequel dans VULK (ou adaptez-les ailleurs). Chacun spécifie les temps, le média, la discipline de mouvement et les règles de performance, car cette spécification fait la différence entre un film réalisé et un diaporama aléatoire.

1. Hero cinématique épinglé (lancement produit) :

Crée un site de lancement one-page pour un casque over-ear premium nommé Aurea One. Le hero est une scène cinématique épinglée qui tient environ 4000px de scroll : fond studio sombre, le titre « Le silence, à l'état d'ingénierie. » s'assemble ligne à ligne avec une révélation masquée, puis trois temps de captions apparaissent et disparaissent sur la scène épinglée — « 40h de batterie », « ANC adaptatif », « Transducteurs titane » — chaque temps décalant subtilement le dégradé de fond du presque-noir au bronze profond. Uniquement du mouvement lent et délibéré ; rien ne rebondit. Après la libération du hero : une section specs en grille deux colonnes, une rangée de galerie et un temps final de CTA plein viewport avec un seul bouton. Utilise le smooth scroll Lenis collé à GSAP ScrollTrigger sur une seule boucle requestAnimationFrame, anime uniquement transform et opacity et respecte prefers-reduced-motion avec un fallback statique.

2. Scroll-scrub en séquence d'images sur canvas (la technique classique d'Apple) :

Crée une page d'histoire produit pour une machine à expresso avec un scrub de séquence d'images en canvas comme pièce maîtresse. Crée une section canvas épinglée plein viewport sur 5000px de scroll : précharge une séquence de 90 frames (frame-0001.webp à frame-0090.webp depuis /sequence/, avec un indicateur de progression de chargement jusqu'à ce qu'au moins les 30 premières frames soient prêtes), dessine la frame courante sur le canvas avec un cadrage cover-fit et une résolution consciente du devicePixelRatio, et mappe la progression du scroll sur l'index de frame avec un petit lerp pour que le scrubbing paraisse amorti plutôt qu'en escalier. Superpose quatre temps de captions à 10 %, 35 %, 60 % et 85 % de progression — kicker court plus une ligne d'accroche, en fondu entrant et sortant. Précharge les frames avec Promise.all en idle, décode en avance de la frame courante et ne dessine jamais une frame dont le décodage n'est pas terminé. Sous la séquence : une section matériaux et un CTA d'achat. Image poster statique comme fallback pour reduced-motion et connexions lentes.

3. Hero vidéo scroll-scrub avec temps de captions :

Crée une landing page cinématique pour une marque horlogère suisse où le hero est une vidéo épinglée et pilotée par le scroll : le currentTime de la vidéo est piloté par la position de scroll sur 9000px, scroller fait donc défiler le film image par image — il ne doit jamais se lire en autoplay. Charge la vidéo en blob pour qu'elle soit entièrement seekable, règle le temps cible dans une seule boucle requestAnimationFrame avec lissage et coalesce les seeks pour que les navigateurs lents n'accumulent jamais de file. Cinq temps de captions apparaissent sur le film à des plages de progression définies — phrase d'ouverture centrée, puis temps alternés à gauche et à droite avec un numéro eyebrow (01–04), titre et une ligne de sous-titre, en clôture un CTA centré « Réservez la vôtre ». Typographie display serif, letter-spacing généreux, fond noir profond. Sous le hero : une grille de collection trois colonnes et un footer discret.

4. Histoire produit en scrollytelling avec temps éclatés :

Crée une page d'histoire pilotée par le scroll pour un sac à dos modulaire. Six temps narratifs numérotés, chacun une scène épinglée : 1) HERO — photo produit plein viewport, titre qui s'assemble mot à mot ; 2) MANIFESTE — déclaration courte avec texte en parallaxe par couches ; 3) LE SYSTÈME — le sac se sépare visuellement en trois cartes de modules qui glissent à mesure que le scroll progresse, chacune avec une étiquette de callout ; 4) MATÉRIAUX — fond texture en gros plan, trois captions de specs apparaissant en séquence ; 5) SUR LE TERRAIN — galerie à défilement horizontal épinglée pendant que le scroll pilote la translation en x ; 6) CLÔTURE — sensation de recul caméra via scale, produit réassemblé, CTA. Chaque temps décale légèrement la couleur d'accent le long d'un dégradé chaud. GSAP ScrollTrigger avec scrub: true de bout en bout — la position de scroll de l'utilisateur pilote toute l'animation directement, pas de scroll-jacking, pas d'autoplay minuté.

5. Film de marque immersif (genre parfum, accent 3D) :

Crée un site de marque immersif pour un parfum de niche nommé Noir Méridien. Ancres esthétiques : film de campagne de parfum × exposition de musée de luxe. Sombre par défaut avec lumière d'accent ambre. Structure-le comme un film de scroll continu en cinq temps : HERO avec le flacon en objet 3D interactif (React Three Fiber — matériau verre, éclairage studio doux, rotation lente au repos qui s'incline de quelques degrés vers le curseur) ; NOTES — trois temps de captions épinglés où chaque note (bergamote, iris, vétiver) fait évoluer la lumière d'accent de la scène ; ARTISANAT — séquence macro scroll-scrub avec deux captions ; MAISON — manifeste serif avec révélation masquée ligne à ligne ; FINAL — le flacon 3D revient centré, bloom de postprocessing subtil, un seul CTA « Découvrir ». Tout mouvement lent et délibéré — un film continu, pas des blocs de site séparés. Lazy-load du bundle 3D, pause du rendu hors écran, pixel ratio plafonné à 2, fallback reduced-motion partout.

6. Portfolio avec galerie de travaux horizontale épinglée :

Crée un portfolio pour un motion designer. Hero : nom en typographie surdimensionnée révélé par une animation SplitText en cascade, ligne de rôle en dessous, fond sombre avec un grain animé discret. Puis une galerie horizontale épinglée : la section s'épingle pendant que le scroll vertical pilote le déplacement horizontal à travers 6 cartes de projets, chaque carte grossissant légèrement en passant au centre, avec titre et année. Cliquer sur une carte ouvre une page d'étude de cas avec un placeholder de hero vidéo scroll-scrub et une mise en page texte-et-médias. Les sections à propos et contact ferment la page avec une révélation de texte chorégraphiée ligne à ligne. Setup Lenis + GSAP à boucle unique, animation transform/opacity uniquement, objectif 60fps sur des laptops milieu de gamme.

Deux règles d'itération valables pour les six : changez un temps par prompt de suivi (« ralentis le temps 3, garde le reste ») et dirigez avec des ancres d'ambiance, pas des adjectifs — « étalonné comme un documentaire Netflix » oriente la lumière et le rythme mieux que « rends-le plus cool ».

Comment cela se compare-t-il au code à la main, Webflow et Framer — honnêtement ?

Coder à la main avec GSAP est le plafond. Les studios qui vivent dans ScrollTrigger, WebGL et le territoire des shaders sur-crafteront n'importe quel générateur dans le 1 % supérieur de l'ambition — ce sont eux qui gagnent le Site of the Day des Awwwards. Le coût est le coût : un creative developer à ce niveau facture environ 5 000–15 000 € pour un one-pager comparable, et les tours d'itération se comptent en jours, pas en phrases. Si vous avez le budget et le délai, cela reste une excellente voie. La voie du code généré vous donne 90 % du genre en minutes et — crucial — produit le même type de code source qu'un creative developer peut ensuite pousser plus loin.

Webflow (à partir de 14 $/mois d'hébergement, annuel) a de vraies interactions au scroll et un éditeur visuel mûr. Pour les effets au niveau de l'élément — fondus, parallaxe, sections sticky — il est réellement bon. C'est sur les techniques maîtresses du genre qu'il force : la vidéo scroll-scrub et les séquences d'images en canvas demandent des embeds de code custom, et la longue chorégraphie de timelines épinglées lutte contre le panneau d'interactions. L'export de code de Webflow existe mais n'est pas fait pour être étendu à la main. Choisissez Webflow quand votre équipe y vit déjà et que le design est en sections plutôt qu'en film.

Framer (à partir de 10 $/mois, annuel) est la voie la plus rapide pour qu'un designer livre une page marketing propre avec des transformations au scroll et des effets d'apparition de bon goût. Il n'est pas construit pour la narration scrubbed : pas de timeline native de vidéo scroll-scrub, pas de séquence canvas, et le site vit sur l'hébergement de Framer — il n'y a pas de propriété pratique du code. Choisissez Framer pour la vitesse sur des pages standard ; choisissez le code généré quand la page EST le film.

VULK (intro 3 jours à 3,99 $ → à partir de 19,99 $/mois, payant uniquement) génère le genre complet en code qui vous appartient : fondation Lenis + ScrollTrigger et chorégraphie de scroll dans tous les plans, avec la couche immersive premium — vidéo cinématique générée par IA et 3D temps réel — sur Pro (39,99 $/mois, intro 3 jours à 9,99 € dans l'UE). Zéro offre gratuite, délibérément : c'est la voie premium du web design, et les données de la plateforme montrent que les builders à intention immersive la traitent comme telle — ils se convertissent en clients payants à 20,4 %, six fois le taux de base (données de la plateforme VULK, juillet 2026). Le compromis honnête : pas de canvas visuel où faire glisser des éléments ; la réalisation passe par le langage et le code.

Comment garder un film de scroll rapide — et pas agaçant ?

Les sites pilotés par le scroll meurent de deux morts : les saccades et le détournement. La discipline complète, entièrement promptable :

• Une seule boucle d'animation. Lenis piloté par le ticker de GSAP, ScrollTrigger synchronisé sur Lenis, autoRaf: false. Deux boucles qui se battent, c'est la source nº 1 de saccades — impossible à corriger en optimisant les assets.
• Scrubber, jamais détourner. La position de scroll de l'utilisateur pilote directement la progression de l'animation (scrub: true). Ne prenez jamais le volant, n'animez jamais la position de scroll elle-même, n'enfermez jamais l'utilisateur dans une section qui scrolle à sa place. Le scrubbing respecte le visiteur ; le scroll-jacking le perd.
• Transform et opacity uniquement. Animer des propriétés de layout (width, top, margin) force un reflow à chaque frame. Les transforms et l'opacity restent sur le compositeur.
• Encodez la vidéo pour le seeking. Un MP4 par défaut a des keyframes espacées de plusieurs secondes — le scrubber bégaie. Utilisez un encodage short-GOP (une keyframe toutes les quelques frames), chargez-la en blob pour une seekabilité totale et coalescez les seeks pour Safari.
• Budgétez la séquence d'images. 90 frames × 200 Ko font 18 Mo — inacceptable sur mobile. Exportez du WebP à la résolution d'affichage, plafonnez les séquences vers 100 frames, préchargez progressivement et envisagez de servir moitié moins de frames sur petits écrans.
• Mettez tout en pause hors écran. IntersectionObserver arrête le moteur de scrub, le dessin canvas et toute boucle de rendu 3D quand leur section n'est pas visible.
• Respectez prefers-reduced-motion. Servez une page statique, entièrement lisible, avec des images poster. C'est une exigence d'accessibilité, qui double comme fallback pour les appareils modestes.
• Gardez le texte dans le DOM. Captions et titres restent du vrai HTML positionné sur le média — crawlable, sélectionnable, traduisible. Ne gravez jamais le copy dans les frames de la vidéo.
• Mesurez sur un téléphone milieu de gamme. Le profiling GPU des DevTools Chrome sur un Android à 200 € dit la vérité sur votre scène épinglée de 5000px ; un laptop M-series, non.

Un site à scroll façon Apple nuit-il au SEO et aux Core Web Vitals ?

Non, s'il est construit avec la discipline ci-dessus. Le risque de contenu est nul quand titres et captions restent du texte dans le DOM — la page se lit pour les crawlers comme un document normal avec des médias. Les risques de performance sont précis : LCP retardé par une vidéo hero lourde (correctif : image poster d'abord, le média charge derrière), blocage du main thread pendant le préchargement de la séquence (correctif : préchargement progressif en idle) et CLS des conteneurs de pin (correctif : le pinning de ScrollTrigger réserve l'espace correctement par défaut). Un film de scroll construit ainsi score comme n'importe quel site bien construit avec un gros asset différé. Ce qui nuit vraiment aux classements, c'est ce que vous ne devriez de toute façon pas construire : le scroll-jacking, qui gonfle le rebond précisément sur les pages que vous avez payées pour impressionner.

Comment le déployer ?

Un site à scroll généré est un build Vite standard — des assets statiques plus les médias. Sur VULK, c'est un clic vers l'edge de Cloudflare avec URL en direct et support de domaine personnalisé sur les plans payants, ou exportez le ZIP / poussez sur GitHub et hébergez sur n'importe quelle plateforme statique. Deux notes propres au genre : servez la vidéo et les séquences de frames avec de longs cache headers immuables (ce sont vos plus gros assets et ils ne changent pas à chaque deploy), et gardez la vidéo de scrub sous ~15 Mo avec l'image poster qui assure le premier rendu — le film doit démarrer au moment où le visiteur l'atteint, pas après un spinner.