Prototype Croquis
A pen sketch on cream paper becoming a website, a rainbow sweep and a living button
A black line draws a page, then a colorful sweep turns it into a real website: images, headings, a button changing color. The pace is slow and satisfying. For a creation tool, a site builder or a web agency.
Style DNA
- Broll
- aucune banque d'images : des écrans d'interface recréés (page « Plan your next trip », fil de discussion « #homepage-redesign », éditeur de code), le croquis au trait et le logo ; dans le skill : la vidéo de l'utilisateur dans la carte et 1 ou 2 captures (avant, après)
- Level
- advanced
- Sound
- voix off posée, musique douce minimale, clics et pops d'interface à chaque changement (2,1 s, 6,4 s, 8,3 s, 10,2 s, 11,2 s, 12,3 s, 13,5 s, 14,8 s, 15,9 s, 16,8 s, 17,6 s, 18,5 s, 20,1 s, 21,0 s, 22,1 s, 23,0 s : 6,4 par 10 s) ; le skill pose un pop sur chaque apparition et un whoosh sur les fondus et le retournement
- Tools
- hyperframes, ffmpeg, whisper
- Limits
- les pièces du site ne se construisent pas une à une à partir du croquis de l'utilisateur (le skill montre sa vidéo ou ses captures dans la carte) ; le bouton qui change de couleur au mot près n'est reproduit que si la capture le montre ; le fil de discussion est remplacé par la carte de l'utilisateur
- Motion
- croquis au trait noir qui se dessine sur papier crème, barre bleue lumineuse qui révèle l'interface, carte blanche flottante à grande ombre douce, chiffre frappé lettre à lettre et compteur orange avec frise pointillée, logo à la plume tracé avec ondes vertes, côte à côte « you draw / it builds » avec crayon, palette de couleurs en colonne et balayage arc-en-ciel, puce minuteur sombre, cercle rouge tracé à la main, pastille vocale sombre avec texte frappé, carte qui se retourne sur du code frappé, barre d'adresse frappée et slogan mot à mot
- Source
- skill-factory
- Grading
- aucun étalonnage de prise : fond crème chaud #f0ece7 (39 %) et blanc cassé #f8f5f8 (39 %), encre #171921 (9 %), accents rares menthe #2fb196, violet #7747e7, orange #f27c2e, bleu #355caf ; luminance 210, contraste 68, saturation 0,09, chaleur -2,6 ; centre plus clair, bords à peine plus sombres
- Summary
- Démo d'appli en motion design calme sur papier crème #f0ece7 : une scène par phrase (8 scènes en 25 s, 3,1 s en moyenne), l'interface en carte blanche flottante à grande ombre douce, un croquis au trait qui se dessine puis se fait révéler par une barre bleue, un chiffre frappé lettre à lettre (Poppins SemiBold 176 px) avec compteur orange, un logo à la plume avec ondes, un côte à côte « you draw / it builds », un balayage arc-en-ciel qui relooke l'écran, un cercle rouge et une pastille vocale, une carte qui se retourne sur du code, et une carte de fin avec adresse frappée et slogan mot à mot. Aucun sous-titre, aucun plan réel.
- Three d
- un seul effet 3D : le retournement de la carte (rotationY avec perspective 1400 px), fait en CSS, sans Blender
credits
