System Requirements Document for livre-stop-motion

1. Introduction

livre-stop-motion est une expérience narrative web interactive : un livre illustré qui s'ouvre physiquement à l'écran et révèle une scène de théâtre en carton photographiée. Au loin dans le décor se dresse une cabane minuscule dont une seule fenêtre est éclairée à la chandelle ; au premier plan rôde un tueur nommé Ryan, portant un masque de Michael Myers, qui poursuit sa victime. L'ensemble est rendu dans une ambiance Tim Burton et une technique de stop motion : tout est fabriqué à la main, photographié, et animé image par image.

Le produit s'adresse à un Visiteur / Lecteur : une personne qui arrive curieuse et qui veut être dérangée — amateur de Tim Burton, d'artisanat en stop motion et d'iconographie de slasher. Ce n'est pas un utilitaire : c'est une performance. Le lecteur ouvre le livre, découvre la cabane au loin, puis suit la poursuite de la victime par Ryan, du début à la fin de la séquence.

Le style de dessin demandé par l'utilisateur est repris tel quel : illustration artisanale, matière réelle, imperfection volontaire, cadre par cadre.

2. System Overview

L'expérience est livrée comme une application web à interface personnalisée, composée de trois surfaces ordonnées et publiques :

1. Landing — première impression anonyme : un théâtre de carton photographié, plein cadre, avec le titre en carte de papier découpée et l'unique commande « OUVRIR LE LIVRE ».
2. Book Opening — le livre fermé, posé au centre comme un objet réel, que le lecteur ouvre en 14 poses discrètes ; la couverture s'ouvre et révèle l'illustration avec la cabane visible au loin.
3. Chase Scene — la séquence narrative : une pellicule horizontale de cadres à sprockets que le lecteur fait avancer, où la silhouette de Ryan progresse par bonds de 6 images derrière sa victime.

Acteurs. Un seul acteur humain accepté : le Visiteur / Lecteur. Aucun autre rôle humain n'est introduit. Les éléments fabriqués (Ryan, la victime, la cabane) sont des sujets de la narration, pas des acteurs du produit.

Comportement accepté. Reprendre le style de dessin illustré ; présenter l'expérience sous forme de livre qui s'ouvre ; montrer une cabane au loin dans la scène ; mettre en scène un tueur nommé Ryan portant un masque de Michael Myers poursuivant sa victime ; tenir une ambiance Tim Burton ; rendre le tout en stop motion.

Propriété. Les trois surfaces sont détenues par l'application, sans exigence d'accès : aucune identité, aucun compte, aucune session n'est nécessaire pour vivre l'expérience. Aucun fournisseur externe, aucune destination externe et aucun processus système ne porte de comportement humain dans ce périmètre.

Exclusions étroites. Aucune gestion de compte, aucun tableau de bord, aucune recherche, aucun partage social, aucune fonctionnalité adjacente de produit narratif ou de plateforme n'est incluse. La cabane reste petite, lointaine et légèrement hors foyer ; elle n'est jamais agrandie ni mise au premier plan. Aucun accent bleu ou indigo n'est introduit.

2a. Product Interpretation and Delivery Boundary

Interprétation produit. La demande de l'utilisateur décrit une seule œuvre : un livre animé qui s'ouvre et raconte une poursuite. Les trois surfaces ne sont pas trois fonctionnalités indépendantes mais trois moments d'une même performance continue — l'affiche, l'ouverture, la scène. Le lecteur n'a rien à configurer, rien à saisir, rien à posséder : il regarde et il avance.

Propriété de livraison et d'accès. L'expérience est livrée entièrement en première partie, en interface personnalisée, sur des surfaces publiques anonymes. Le contrat de pages est versionné et figé : Landing, Book Opening, Chase Scene, dans cet ordre, avec access_requirement: none pour chacune. Aucune interaction d'établissement d'identité n'est requise, car aucune continuité d'acteur, aucun engagement, aucun droit ni aucun transfert de valeur ne doit être lié à un participant identifié. Aucune surface protégée n'existe, donc aucune frontière d'accès anonyme distincte n'est nécessaire.

Frontière courant / futur. Tout le périmètre décrit ici est courant. Aucune fonctionnalité future n'est acceptée à ce stade ; la section 11 réserve explicitement cet espace sans l'engager.

2b. Source Content Inventory

Non applicable : aucune directive de référence de type content_source n'a été fournie pour ce projet.

2c. Page Content and Component Coverage

Landing

• Information / état. Composition asymétrique plein cadre sur fond quasi noir #0B0A0E. À gauche, une carte de titre en papier découpé à la main — « LIVRE » sur « STOP » sur « MOTION » — en capitales de machine à écrire, os #F2E8DA, empilée sur trois lignes, tournée à −2°, avec son ombre découpée visible, occupant les 55 % gauches du viewport. Derrière et à droite, profondément dans le décor, la cabane miniature minuscule à l'horizon, sa seule fenêtre ambre chandelle #E8B23A allumée, à demi voilée par du brouillard de coton et des branches de fil de fer. Au plan intermédiaire, volontairement petit et hors foyer, le masque blanc os de Ryan accroche la lumière clé ; la coat pâle de la victime se perd dans le noir au bord droit. Rien n'est centré, rien n'est symétrique : le cadre entier se lit comme un seul objet photographié.
• Actions principales. Une seule commande : l'étiquette rectangulaire estampillée « OUVRIR LE LIVRE », en sang séché #7A2E3A avec texte os, épinglée sous la carte de titre par une ficelle dessinée. Elle mène à Book Opening.
• Actions de soutien. Aucune. Pas de navigation secondaire, pas de menu, pas de lien externe.
• Entités du domaine. Le livre (objet fermé), la cabane (élément lointain), Ryan (silhouette masquée), la victime (silhouette pâle), le décor de théâtre en carton.
• Responsabilités des composants. TitleCard : carte de papier découpée, épaisseur visible, ombre dure 4px 4px 0, rotation −2°, typographie Special Elite en capitales espacées +0.08em. StageBackdrop : photographie du décor, cabane poussée au fond à droite, brouillard et branches en surimpression. MidgroundFigures : Ryan et la victime, petits, hors foyer, jamais au centre. OpenBookTag : étiquette rectangulaire estampillée avec trou poinçonné et ficelle, cible tactile pleine largeur sur mobile. AmberThread : fil de progression ambre 2px sur toute la hauteur, seul élément animé en douceur.
• États. Chargement : le décor se compose en cadres discrets, la carte de titre apparaît en dernier. Vide : sans objet — la page est toujours pleine. Succès : le lecteur voit le titre, la cabane lointaine et l'étiquette. Erreur : si la photographie du décor ne charge pas, un fond #0B0A0E avec la carte de titre et l'étiquette reste entièrement lisible et actionnable. Récupération : l'étiquette reste cliquable indépendamment de l'état du décor.

Book Opening

• Information / état. Le livre fermé, posé au centre exact, comme un objet réel photographié sur une table sombre, occupant 70 % de la hauteur du viewport. Couverture peinte sur bois avec usure réelle du dos ; titre de couverture en Rye, variante encrée à la main, réservée à cet usage. À l'ouverture, la double page remplit l'écran bord à bord et le chrome d'interface se retire en deux fines étiquettes d'angle.
• Actions principales. Ouvrir le livre : la couverture bascule en 14 poses discrètes sur une temporisation step-end, gond visible s'élargissant à mesure qu'elle tourne. Une fois ouvert, révéler l'illustration de la double page avec la cabane visible au loin. Continuer vers Chase Scene.
• Actions de soutien. Revenir à Landing par l'étiquette d'angle. Sous prefers-reduced-motion, avancer et reculer manuellement parmi les poses via des commandes visibles Précédent / Suivant.
• Entités du domaine. Le livre (couverture, dos, gond, double page), la cabane lointaine, le décor de théâtre.
• Responsabilités des composants. ClosedBook : objet photographié centré, 70vh, ombre dure portée. CoverSwing : séquence de 14 poses en step-end, gond qui s'élargit. SpreadReveal : illustration pleine largeur bord à bord, bords de page déchirés et deckle. CornerLabels : deux fines étiquettes d'angle (retour, continuer). FrameStepper : commandes Précédent / Suivant visibles uniquement en mode mouvement réduit.
• États. Chargement : le livre fermé apparaît avant toute séquence ; les poses se préchargent. Vide : sans objet. Succès : la double page est ouverte et la cabane est visible au loin. Erreur : si une pose manque, la séquence se termine sur la dernière pose disponible et la double page reste affichée. Récupération : les commandes Précédent / Suivant permettent de rejouer ou de figer n'importe quelle pose.

Chase Scene

• Information / état. Une pellicule horizontale de cadres à bordures de sprockets, un cadre dominant à la fois, le cadre suivant dépassant de 12 % au bord droit comme une bande physique. Chaque cadre montre la progression de la silhouette de Ryan par bonds de 6 images derrière la victime en coat blanc os. La cabane reste au loin dans les cadres où elle apparaît. Le fil ambre #E8B23A continue de ramper en 60fps contre le juddering du stop motion.
• Actions principales. Avancer d'un cadre à la fois dans la poursuite, jusqu'à la fin de la séquence. Chaque cadre est entièrement lisible sur place.
• Actions de soutien. Reculer d'un cadre. Revenir à Book Opening. Sous prefers-reduced-motion, les cadres se répartissent en rangées enroulées ou en défilement horizontal, chacun pouvant être amené entièrement en vue.
• Entités du domaine. Les cadres de pellicule, Ryan (masque de Michael Myers), la victime, la cabane lointaine, le fil de progression ambre.
• Responsabilités des composants. Filmstrip : rangée horizontale défilable, cadre dominant, aperçu de 12 % à droite. SprocketFrame : bordure à sprockets, ombre dure 4px 4px 0. RyanSilhouette : progression par bonds de 6 images, masque blanc os avec deux vides oculaires noirs et cheveux sombres sculptés. VictimFigure : petite figurine d'argile pâle en coat blanc os. DistantCabin : modèle physique minuscule, une fenêtre ambre, légèrement hors foyer. AmberThread : fil de progression 2px, seule animation lisse. MaskDivider : forme de masque en papier découpé, vides oculaires poinçonnés laissant voir le fond de page, utilisée comme séparateur de section.
• États. Chargement : les premiers cadres apparaissent avant les suivants ; le cadre dominant est lisible en premier. Vide : sans objet. Succès : le lecteur atteint le dernier cadre et la poursuite est terminée. Erreur : si un cadre ne charge pas, un cadre de remplacement conserve la bordure à sprockets et le fil ambre, et la navigation reste possible. Récupération : Précédent / Suivant et le retour à Book Opening restent disponibles à tout moment.

3. Functional Requirements

FR-1 — Reprendre le style de dessin illustré En tant que Visiteur / Lecteur, je devrais voir l'expérience rendue dans le style de dessin illustré demandé, afin de reconnaître l'œuvre comme celle qui a été commandée.

• Provenance : explicit. Cycle de vie : déclencheur = arrivée sur Landing ; résultat observable = illustration artisanale, matière réelle, imperfection volontaire conservée (grain, poussière, coutures visibles, bords de décor) ; échec matériel = si une ressource illustrée manque, le fond #0B0A0E et la typographie restent lisibles ; continuation = passage à l'ouverture du livre. Contrainte dure : style de dessin à reprendre tel que décrit par l'utilisateur.

FR-2 — Présenter l'expérience sous forme de livre qui s'ouvre En tant que Visiteur / Lecteur, je devrais voir un livre fermé puis l'ouvrir, afin de entrer dans l'histoire par un geste physique.

• Provenance : explicit. Cycle de vie : déclencheur = activation de « OUVRIR LE LIVRE » sur Landing ; entrée = livre fermé centré sur Book Opening ; action = ouverture de la couverture en 14 poses discrètes sur step-end ; résultat observable = double page révélée bord à bord, gond élargi ; échec matériel = la séquence s'arrête sur la dernière pose disponible et la double page reste affichée ; récupération = Précédent / Suivant ; continuation = Chase Scene.

FR-3 — Montrer une cabane au loin dans la scène En tant que Visiteur / Lecteur, je devrais apercevoir une cabane lointaine dans le décor, afin de situer le lieu de l'histoire.

• Provenance : explicit. Cycle de vie : déclencheur = affichage de Landing puis de la double page de Book Opening ; résultat observable = cabane minuscule à l'horizon, à l'arrière-plan, à demi voilée par le brouillard et les branches, une seule fenêtre ambre #E8B23A allumée, légèrement hors foyer ; échec matériel = si le modèle de cabane ne charge pas, le décor reste complet sans elle et rien d'autre ne casse ; continuation = la cabane reste visible au loin dans les cadres de Chase Scene où elle apparaît. Contrainte dure : la cabane doit apparaître au loin (arrière-plan), pas au premier plan.

FR-4 — Mettre en scène le tueur Ryan au masque de Michael Myers poursuivant sa victime En tant que Visiteur / Lecteur, je devrais suivre la poursuite de la victime par Ryan, afin de vivre la tension narrative.

• Provenance : explicit. Cycle de vie : déclencheur = entrée dans Chase Scene ; action = avancer d'un cadre à la fois ; résultat observable = la silhouette de Ryan progresse par bonds de 6 images derrière la victime en coat blanc os, cadre après cadre ; échec matériel = un cadre de remplacement conserve la bordure à sprockets et la navigation ; récupération = Précédent / Suivant ; continuation = dernier cadre atteint, fin de la séquence. Contrainte dure : le tueur doit être nommé Ryan et porter un masque de Michael Myers, rendu comme un objet physique photographié — masque blanc os, deux vides oculaires noirs, cheveux sombres sculptés — jamais un vecteur plat ni du clip art.

FR-5 — Tenir une ambiance Tim Burton En tant que Visiteur / Lecteur, je devrais ressentir une ambiance gothique et théâtrale cohérente, afin de rester dans le registre demandé.

• Provenance : explicit. Cycle de vie : déclencheur = toute surface ; résultat observable = palette sombre violet-encre, surfaces carton, accent ambre unique, formes découpées à la main, ombres dures, aucun bleu ni indigo ; échec matériel = sans objet ; continuation = cohérence maintenue d'une surface à l'autre. Contrainte dure : ambiance imposée Tim Burton.

FR-6 — Rendre le tout en stop motion En tant que Visiteur / Lecteur, je devrais voir le mouvement se produire par cadres discrets, afin de percevoir la technique artisanale.

• Provenance : explicit. Cycle de vie : déclencheur = toute animation narrative ; résultat observable = 8–12 fps en temporisation linéaire ou step-end, juddering plutôt que glissement, survols instantanés sans courbe d'accélération, flamme de chandelle en boucle de 3 images, brouillard en pas de 4 images ; exception unique = le fil ambre de progression rampe en douceur à 60fps ; échec matériel = sous prefers-reduced-motion, toutes les séquences deviennent des collages de cadres statiques que le lecteur avance manuellement ; récupération = commandes Précédent / Suivant visibles ; continuation = chaque cadre reste entièrement lisible sur place. Contrainte dure : technique de rendu imposée stop motion.

FR-7 — Entrer anonymement et parcourir sans compte En tant que Visiteur / Lecteur, je devrais vivre l'expérience complète sans créer de compte ni m'authentifier, afin de rester dans la performance sans friction.

• Provenance : explicit (contrat de pages versionné, access_requirement: none sur les trois surfaces). Cycle de vie : déclencheur = arrivée sur Landing ; résultat observable = les trois surfaces sont accessibles directement ; échec matériel = sans objet ; continuation = aucune interruption d'identité à aucun moment.

FR-8 — Avancer et reculer dans la séquence En tant que Visiteur / Lecteur, je devrais contrôler ma progression dans la poursuite, afin de regarder à mon rythme.

• Provenance : required_inference (mécanique indispensable pour rendre la séquence utilisable et pour fournir la récupération exigée par FR-4 et FR-6). Cycle de vie : déclencheur = activation de Précédent ou Suivant ; résultat observable = le cadre dominant change, le cadre suivant reste visible à 12 % au bord droit ; échec matériel = si un cadre manque, la navigation saute au cadre disponible suivant ; continuation = retour possible à Book Opening.

4. User Personas

Visiteur / Lecteur

Contexte produit. Le Visiteur / Lecteur arrive sur une page publique, sans compte, sans invitation, sans contexte préalable autre que sa curiosité. Il est attiré par Tim Burton, par l'artisanat du stop motion et par l'iconographie du slasher. Il ne cherche pas à accomplir une tâche : il cherche à être dérangé, à regarder une performance.

Objectif principal. Vivre la scène narrative dans une ambiance Tim Burton, du début à la fin de la séquence — ouvrir le livre, découvrir la cabane au loin, puis suivre la poursuite de la victime par le tueur Ryan au masque de Michael Myers.

Responsabilités acceptées, distinctes.

• Déclencher l'ouverture du livre depuis Landing.
• Ouvrir physiquement la couverture et révéler la double page sur Book Opening.
• Repérer la cabane lointaine dans le décor.
• Avancer cadre par cadre dans la poursuite sur Chase Scene, et reculer s'il le souhaite.
• Terminer la séquence.

Entrées et décisions. Le lecteur ne saisit aucune donnée. Ses seules décisions sont : ouvrir ou non le livre, avancer ou reculer d'un cadre, revenir à la surface précédente. Sous prefers-reduced-motion, il décide du rythme en avançant manuellement les poses et les cadres.

Interactions avec les autres participants acceptés. Aucune. Le Visiteur / Lecteur est le seul acteur humain accepté ; il n'interagit avec aucun autre participant humain. Les figures de la narration — Ryan, la victime, la cabane — sont des sujets observés, pas des participants qui agissent ou répondent.

Succès observable. Le lecteur a vu la carte de titre, a ouvert le livre, a vu la cabane au loin avec sa fenêtre ambre allumée, a suivi la progression de Ryan derrière la victime jusqu'au dernier cadre, et a pu revenir en arrière à tout moment.

Ce qui distingue ce rôle. Ce n'est pas un opérateur ni un gestionnaire : il n'a rien à configurer, rien à posséder, rien à retrouver. Son travail est entièrement réceptif et rythmique — regarder, ouvrir, avancer. La seule compétence requise est la patience du spectateur.

5. Core User Flows

Flux A — Arriver et ouvrir le livre

1. Le Visiteur / Lecteur arrive sur Landing, surface publique anonyme, sans compte ni session.
2. Il voit le théâtre de carton plein cadre : la carte de titre découpée « LIVRE / STOP / MOTION » à gauche, tournée à −2°, et au loin à droite la cabane minuscule avec sa fenêtre ambre allumée, voilée par le brouillard et les branches.
3. Il repère, au plan intermédiaire et hors foyer, le masque blanc os de Ryan et la coat pâle de la victime qui se perd dans le noir.
4. Il active l'unique commande, l'étiquette estampillée « OUVRIR LE LIVRE ».
5. Résultat observable : il passe à Book Opening, où le livre fermé est posé au centre, occupant 70 % de la hauteur du viewport.
6. Échec et récupération : si la photographie du décor ne charge pas, la carte de titre et l'étiquette restent entièrement lisibles et actionnables sur fond #0B0A0E.
7. Suite : il ouvre le livre (Flux B).

Flux B — Ouvrir la couverture et révéler la double page

1. Sur Book Opening, le Visiteur / Lecteur voit le livre fermé, couverture peinte sur bois avec usure réelle du dos, titre de couverture en Rye.
2. Il déclenche l'ouverture.
3. La couverture bascule en 14 poses discrètes sur temporisation step-end ; le gond s'élargit visiblement à mesure qu'elle tourne.
4. Résultat observable : la double page remplit l'écran bord à bord, le chrome d'interface se retire en deux fines étiquettes d'angle, et l'illustration révèle la cabane visible au loin avec sa fenêtre ambre.
5. Échec et récupération : si une pose manque, la séquence se termine sur la dernière pose disponible et la double page reste affichée ; les commandes Précédent / Suivant permettent de rejouer ou de figer n'importe quelle pose.
6. Suite : il continue vers Chase Scene (Flux C), ou revient à Landing par l'étiquette d'angle.

Flux C — Suivre la poursuite cadre par cadre

1. Sur Chase Scene, le Visiteur / Lecteur voit une pellicule horizontale : un cadre dominant, le suivant dépassant de 12 % au bord droit comme une bande physique.
2. Il avance d'un cadre.
3. Résultat observable : la silhouette de Ryan progresse par bonds de 6 images derrière la victime en coat blanc os ; la cabane reste au loin dans les cadres où elle apparaît ; le fil ambre #E8B23A rampe en douceur à 60fps contre le juddering du stop motion.
4. Il répète l'avancée jusqu'au dernier cadre.
5. Résultat observable : la poursuite est terminée ; chaque cadre est resté entièrement lisible sur place.
6. Échec et récupération : si un cadre ne charge pas, un cadre de remplacement conserve la bordure à sprockets et le fil ambre, et la navigation reste possible ; Précédent ramène au cadre précédent, et le retour à Book Opening reste disponible à tout moment.
7. Suite : il peut revenir à Book Opening ou reprendre la séquence depuis le début.

Flux D — Regarder en mouvement réduit

1. Le Visiteur / Lecteur dont le système demande prefers-reduced-motion arrive sur Landing.
2. Toutes les séquences deviennent des collages de cadres statiques ; rien ne judde automatiquement.
3. Sur Book Opening, il avance et recule manuellement parmi les 14 poses via les commandes visibles Précédent / Suivant.
4. Sur Chase Scene, les cadres se répartissent en rangées enroulées ou en défilement horizontal ; il amène chaque cadre entièrement en vue à son rythme.
5. Résultat observable : chaque cadre et chaque pose restent entièrement lisibles sur place, et la séquence complète reste parcourable du début à la fin.

6. Visuals Colors and Theme

Direction créative autoritaire — muse : Stefan Sagmeister. Lecture industrielle : histoire d'horreur illustrée interactive / expérience narrative web. Registre émotionnel : délectation macabre, dread tactile, suspense théâtral. Le produit n'est pas un utilitaire, c'est une performance : le langage visuel doit être fait main, physique et légèrement faux exprès.

Palette (mode sombre).

Aucun bleu n'est introduit : la lumière de lune est un violet-gris désaturé #6B6478, jamais bleue.

Typographie. Titres : Special Elite — mécanique de machine à écrire, comme estampillée sur une carte puis photographiée : capitales, interlettrage +0.08em, légère rotation entre −2° et +2°. Variante encrée à la main Rye réservée au titre de couverture du livre uniquement. Corps : Alegreya Sans, sans humaniste chaleureux, jamais condensé, jamais fin. Échelle modulaire 1.333 : 56/42/32/24/18/16, avec paliers d'affichage 72/96/128 ; affichage mobile 44px, tablette 64px, bureau 112–128px via clamp(2.75rem, 9vw, 8rem) ; corps 16/18/20 à interligne 1.7 ; légendes 13px capitales interlettrées.

Langage de forme. Physique et découpé à la main. Rectangles à bords durs avec épaisseur de papier visible (bords décalés os ou sang de 2–4px, comme du carton empilé), bords de page déchirés et deckle sur le livre, bordures à sprockets de pellicule sur la séquence de poursuite, et un motif triangulaire récurrent en « toit de cabane » festonné. Aucun rayon de carte mou de 24px, aucun bouton pilule : les commandes sont des étiquettes rectangulaires avec trou poinçonné et ficelle, ou des étiquettes estampillées. Les ombres sont des ombres dures décalées (4px 4px 0), jamais des ombres de portance floues.

Mise en page. Un théâtre mis en scène, pas une page. Landing : composition asymétrique plein cadre, titre posé comme une carte physique dans le tiers inférieur gauche, cabane éclairée poussée à l'extrême droite en arrière-plan derrière un voile de silhouettes de branches nues. Book Opening : livre fermé mort-centré comme un objet réel photographié sur une table sombre, 70 % de la hauteur du viewport ; à l'ouverture, la double page remplit l'écran bord à bord et le chrome se retire en deux fines étiquettes d'angle. Chase Scene : bande horizontale de cadres que le lecteur avance — un cadre dominant, le suivant dépassant de 12 % au bord droit. Grille stricte de 12 colonnes sous le tout, marges latérales généreuses de 8vw sur bureau, 20px sur mobile.

Imagerie. Artisanat photographié fait main : décors de carton et d'argile, brouillard de ouate, arbres en fil de fer, couverture de livre en bois peint avec usure réelle du dos, masque de Michael Myers découpé à la main (blanc os, deux vides oculaires noirs, cheveux sombres sculptés) porté par une figurine d'argile nommée Ryan, et la victime en petite figurine d'argile pâle avec coat blanc os. La cabane est une maquette physique minuscule avec une fenêtre ambre allumée, placée loin au fond du décor et photographiée légèrement hors foyer. Tout est photographié sur la table sombre avec une seule lumière clé dure, pour des ombres longues et théâtrales. Grain, poussière et coutures visibles sont conservés, jamais nettoyés. La typographie est photographiée comme du papier découpé ou du carton estampillé, jamais rendue à plat.

Lisibilité. Le texte lisible et les commandes restent entiers à 375px, 768px et 1280px : titres, étiquettes, libellés et commandes restent entièrement dans le viewport et dans leur conteneur, en s'enroulant ou en se mettant à l'échelle via clamp(...), et aucun autre élément ne les recouvre. L'imagerie, la décoration et le mouvement peuvent être rognés, déborder, tourner ou se chevaucher selon la direction, tant qu'ils ne couvrent aucun texte lisible ni aucune commande.

7. Signature Design Concept

Le théâtre de carton photographié. Le premier écran n'est pas un hero de SaaS : c'est un objet photographié, plein cadre, sur fond #0B0A0E.

• Carte de titre physique. À gauche, une carte de papier découpée à la main porte « LIVRE » sur « STOP » sur « MOTION », en capitales Special Elite os #F2E8DA à clamp(2.75rem, 9vw, 8rem), empilées, tournées à −2°, avec son ombre de papier découpé visible. Elle occupe les 55 % gauches du viewport.
• Profondeur de décor. Derrière et à droite, profondément dans le set, la cabane miniature repose minuscule sur l'horizon, sa seule fenêtre ambre #E8B23A allumée, à demi voilée par le brouillard de ouate et les branches de fil de fer.
• Figures au plan intermédiaire. Volontairement petites et hors foyer, le masque blanc os de Ryan accroche la lumière clé tandis que la coat pâle de la victime disparaît dans le noir au bord droit.
• Commande unique. Une étiquette rectangulaire estampillée « OUVRIR LE LIVRE », en sang #7A2E3A avec texte os, épinglée sous la carte de titre par une ficelle dessinée.
• Fil ambre. Un fil #E8B23A de 2px court sur toute la hauteur de la page comme ligne de progression, seul élément qui glisse en douceur.

Rien n'est centré, rien n'est symétrique, et le cadre entier se lit comme un seul objet photographié. Le concept ne fait que recomposer le contenu, les états et les commandes acceptés : la carte de titre, la cabane lointaine, les figures, l'étiquette d'ouverture et le fil de progression.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Sujet focal. Le théâtre de carton photographié : la carte de titre découpée à gauche, la cabane lointaine à la fenêtre ambre à droite, les figures hors foyer au plan intermédiaire.
• Thèse entrée → transformation → résultat. Le lecteur survole ou approche l'étiquette estampillée → l'étiquette répond instantanément, sans courbe d'accélération, et le fil ambre continue de ramper → le lecteur perçoit un objet physique prêt à être ouvert, et active « OUVRIR LE LIVRE » pour passer à Book Opening.
• Vocabulaire de mouvement. Grammaire stop motion, pas d'easing d'interface : tout bouge en cadres discrets à 8–12 fps en temporisation linéaire ou step-end, la flamme de la chandelle vacille en boucle de 3 images, le brouillard dérive en pas de 4 images, les survols claquent instantanément. Une seule exception : le fil ambre de progression rampe en douceur à 60fps.
• Première image composée. Plein cadre #0B0A0E ; carte de titre os empilée à gauche, tournée à −2°, ombre dure 4px 4px 0 ; cabane minuscule à droite avec sa fenêtre ambre ; masque blanc os et coat pâle au plan intermédiaire, hors foyer ; étiquette « OUVRIR LE LIVRE » en sang épinglée sous le titre ; fil ambre 2px sur toute la hauteur.
• État mouvement réduit. Toutes les séquences deviennent des collages de cadres statiques ; le lecteur avance manuellement les poses et les cadres via des commandes visibles Précédent / Suivant, et chaque cadre reste entièrement lisible sur place.

9. Non-Functional Requirements

NFR-1 — Fidélité au style de dessin. Le rendu doit reprendre le style de dessin illustré demandé par l'utilisateur, avec matière réelle et imperfection volontaire. Provenance : explicit. Justification : contrainte dure du fil de exigences.

NFR-2 — Ambiance Tim Burton. La palette, les formes et le ton doivent rester dans le registre gothique et théâtral demandé ; aucun bleu ni indigo. Provenance : explicit. Justification : contrainte dure.

NFR-3 — Technique stop motion. Le mouvement narratif doit se produire en cadres discrets à 8–12 fps, en temporisation linéaire ou step-end ; le fil ambre de progression est la seule animation lisse. Provenance : explicit. Justification : contrainte dure.

NFR-4 — Identité du tueur. Le tueur doit être nommé Ryan et porter un masque de Michael Myers, rendu comme un objet physique photographié — blanc os, deux vides oculaires noirs, cheveux sombres sculptés — jamais un vecteur plat ni du clip art. Provenance : explicit. Justification : contrainte dure.

NFR-5 — Position de la cabane. La cabane doit rester petite, lointaine, à l'arrière-plan et légèrement hors foyer, avec une seule fenêtre ambre allumée ; elle ne doit jamais être agrandie ni mise au premier plan. Provenance : explicit. Justification : contrainte dure.

NFR-6 — Accessibilité du mouvement. Sous prefers-reduced-motion, toutes les séquences deviennent des collages de cadres statiques avec commandes visibles Précédent / Suivant, et chaque cadre reste entièrement lisible sur place. Provenance : explicit (direction créative). Justification : lisibilité et accessibilité de la narration.

NFR-7 — Lisibilité à toutes les tailles. Le texte lisible et les commandes restent entiers et non recouverts à 375px, 768px et 1280px, en s'enroulant ou en se mettant à l'échelle. Provenance : explicit (direction créative). Justification : lisibilité.

NFR-8 — Accès anonyme. Les trois surfaces sont publiques et accessibles sans compte, sans session et sans authentification. Provenance : explicit (contrat de pages versionné, access_requirement: none). Justification : aucune continuité d'acteur ni engagement n'est requis.

NFR-9 — Conservation de l'imperfection. Le grain, la poussière, les coutures visibles et les bords de décor ne doivent pas être nettoyés. Provenance : explicit (direction créative). Justification : l'imperfection artisanale est le point du rendu.

10. Tech Stack

Aucune technologie n'a été spécifiée par l'utilisateur. Les choix suivants sont des valeurs par défaut cohérentes, étiquetées [Default — not specified by user], et ne créent aucune capacité produit.

• Frontend : React avec Vite [Default — not specified by user]. Justification : interface personnalisée, trois surfaces, animations en cadres discrets.
• Animation : CSS steps() / step-end et transitions instantanées pour la grammaire stop motion ; une seule animation linear à 60fps pour le fil ambre [Default — not specified by user].
• Backend : Python / FastAPI [Default — not specified by user]. Justification : servir les ressources illustrées et les métadonnées de séquence ; aucun comportement humain n'y est délégué.
• Stockage : système de fichiers pour les ressources photographiées (poses du livre, cadres de pellicule, décors) [Default — not specified by user]. Aucune base de données n'est requise, car aucune identité ni état durable par acteur n'existe.
• Conteneurisation : Docker / docker-compose [Default — not specified by user].
• Orchestration : Kubernetes non requis — le déploiement ne l'exige pas [Default — not specified by user].

11. Assumptions and Constraints

Hypothèses.

• A-1 : Le Visiteur / Lecteur est le seul acteur humain ; aucune autre personne n'interagit avec le produit. [Assumption — required_inference]
• A-2 : L'expérience est une performance linéaire en trois moments ; le lecteur n'a aucune donnée à saisir et aucun état à retrouver entre sessions. [Assumption — required_inference]
• A-3 : Les ressources photographiées (poses, cadres, décors) sont produites hors du produit et livrées comme actifs. [Assumption — required_inference]
• A-4 : Le fil ambre de progression est le seul élément animé en douceur ; tout le reste judde. [Assumption — explicit, direction créative]

Contraintes.

• C-1 : Style de dessin à reprendre tel que décrit par l'utilisateur. [explicit]
• C-2 : Ambiance imposée : Tim Burton. [explicit]
• C-3 : Technique de rendu imposée : stop motion. [explicit]
• C-4 : Le tueur doit être nommé Ryan et porter un masque de Michael Myers. [explicit]
• C-5 : La cabane doit apparaître au loin (arrière-plan), pas au premier plan. [explicit]
• C-6 : Aucun accent bleu ou indigo ; la lumière de lune est un violet-gris désaturé. [explicit, direction créative]
• C-7 : Aucun rayon de carte mou de 24px, aucun bouton pilule, aucune ombre de portance floue. [explicit, direction créative]
• C-8 : Le contrat de pages est figé : Landing, Book Opening, Chase Scene, dans cet ordre, toutes en accès none. [explicit, contrat de pages versionné]

Hors périmètre. Aucune gestion de compte, aucun tableau de bord, aucune recherche, aucun partage social, aucune fonctionnalité adjacente de plateforme narrative. Aucune fonctionnalité future n'est acceptée à ce stade ; cet espace reste réservé et non engagé.

12. Glossary

• Visiteur / Lecteur — L'unique acteur humain accepté : la personne qui ouvre le livre animé et parcourt l'histoire en stop motion.
• Landing — Surface publique d'entrée : le théâtre de carton photographié avec la carte de titre et l'étiquette « OUVRIR LE LIVRE ».
• Book Opening — Surface où le livre fermé est ouvert en 14 poses discrètes, révélant la double page et la cabane au loin.
• Chase Scene — Surface narrative : la pellicule horizontale de cadres où Ryan poursuit sa victime.
• Ryan — Le tueur de l'histoire, figurine d'argile portant un masque de Michael Myers découpé à la main.
• Masque de Michael Myers — Masque blanc os avec deux vides oculaires noirs et cheveux sombres sculptés, rendu comme un objet physique photographié.
• La victime — Petite figurine d'argile pâle en coat blanc os, poursuivie par Ryan.
• La cabane — Maquette physique minuscule placée loin au fond du décor, une seule fenêtre ambre allumée, légèrement hors foyer.
• Stop motion — Technique de rendu imposée : mouvement en cadres discrets à 8–12 fps, temporisation linéaire ou step-end, juddering plutôt que glissement.
• Fil ambre — Ligne de progression #E8B23A de 2px courant sur toute la hauteur, seule animation lisse à 60fps.
• Pose — Une des 14 positions discrètes de la couverture du livre pendant son ouverture.
• Cadre — Une unité de la pellicule de la Chase Scene, bordée de sprockets, où la silhouette de Ryan progresse par bonds de 6 images.
• Gond — L'ombre centrale du livre qui s'élargit à mesure que la couverture tourne.