À propos de ce modèle
Transform Data résout le problème de section hero pour un produit IA ou SaaS à partir d’un seul brief capturé. La page affiche son propre titre, « Transform Data Quickly », et la composition est construite autour de ces mots exacts. La palette repose sur gris #505050 en fond et blanc #F8F8F8 pour le texte, et la page est composée en Inter. La livraison est en un seul composant, capturée en 800x592 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 250ms de transitions. Gardez-la ouverte pendant la rédaction, car le brief de 3 605 caractères est la partie qui se transfère à votre page.
Conçu pour
- Empruntez la structure de section hero telle quelle et remplacez les textes ligne par ligne en vous appuyant sur un seul composant.
- Équipes qui reprennent un design de section hero SaaS repéré chez un concurrent et veulent un seul composant dans le brief avant que quiconque choisisse un framework.
- La page sert aux développeurs front-end qui reconstruisent un design de section hero pour un produit IA ou SaaS en un seul composant et cherchent les chiffres derrière le rendu.
Ce qui est inclus
- La barre partage la grille. La navigation tient sur une seule rangée, sans second niveau en dessous. La barre se pose sur la composition 800x592 sans fond propre, la vidéo court donc bord à bord en dessous. Testez la barre sur vos propres médias avant de lui donner un fond.
- Les tailles sont dans le brief, pas dans une échelle. Typographie et espacements sortent ici de la même liste, des pas d’espacement de 16px et des transitions de 250ms. Les valeurs sont citées depuis le prompt capturé plutôt que déduites, elles survivent donc à un nouveau rendu. Vérifiez une reconstruction contre les mêmes chiffres.
- Deux fontes, des rôles clairs. Les paliers de taille et l’interlettrage du brief donnent le ton ici, avec Inter à un corps display serré, puis une chute nette vers le texte secondaire. Un changement de fonte reste sûr tant que les tailles et les graisses restent là où le brief les a placées.
- Les liens avant l’action. Ne donnez pas au nom de marque plus de place que sa typographie n’en demande. La référence a été capturée en 800x592.
Animation et interaction
Les durées du brief
Ici, l’animation se mesure en millisecondes, 250ms. C’est tout le budget d’animation, et il est dépensé sur des changements d’état plutôt que sur une timeline de scroll. Chaque changement d’état nomme une valeur, donc le réglage par défaut du navigateur n’est jamais utilisé. Si vous changez l’easing, changez-le partout.
Une animation qui reste discrète
Celle-ci est livrée comme une composition fixe en 800x592, donc la hiérarchie doit tenir sans animation, et elle tient. Le mouvement est traité comme un retour d’information et non comme une décoration.
Le réagencement de section hero
Testez ce design de section hero en 800x592 puis en largeur téléphone, le même ordre tient, avec l’échelle est fluide plutôt que par paliers. L’ordre est la dernière chose à changer.
Le gain pour un produit IA ou SaaS
Le design plaide sa cause sur un seul écran. Le média est une image fixe en 800x592. Le média porte l’atmosphère, le texte porte l’offre, et la séparation tient grâce à des pas d’espacement de 16px et des transitions de 250ms. Transform Data énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Lire Transform Data comme une spécification
La page contient plus de chiffres qu’elle n’en a l’air, et une reconstruction doit garder des pas d’espacement de 16px et des transitions de 250ms en priorité, le reste peut bouger. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Questions fréquentes
Faut-il un seul composant pour reconstruire Transform Data?
La fiche indique un seul composant pour la provenance, parce que Transform Data a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
Quelle est la longueur du prompt derrière Transform Data?
Comptez 3 605 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Comment se comportent les transitions de 250ms dans Transform Data?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 250ms. Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
