À propos de ce modèle
No-Code Waitlist donne à un produit IA ou SaaS un premier écran fini et les valeurs qui l’ont produit. Le titre affiché est « A new way to think and create with computers », et le reste de bloc CTA s’organise autour de lui. La couleur se réduit à indigo profond #020004 en fond, éclairci #FFFFFF pour le texte et bleu sourd #7C78C7 pour les accents, composée en Inter. La livraison est en React et Tailwind CSS, capturée en 988x720 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 60ms de transitions et un fond vidéo en boucle, assez discrète pour que le texte reste au premier plan. Elle est surtout utile quand le texte de bloc CTA IA et SaaS change sans qu’une refonte soit nécessaire.
Conçu pour
- Les responsables marketing qui héritent de ce design de bloc CTA utiliseront une typographie de 13px à 64px et des sections de 100vh pour vérifier qu’une réécriture a gardé l’échelle.
- Ce design de bloc CTA sert aux fondateurs qui ont besoin d’un seul écran pour prouver que le texte SaaS peut porter 9,4s de vidéo en boucle.
- Quiconque briefe un modèle sur un design de bloc CTA utilisera le prompt de 6 532 caractères comme point de départ.
Ce qui est inclus
- Une navigation sans fond. La rangée du haut réunit le nom de marque, quatre ou cinq liens et une seule action teintée #7C78C7, dimensionnée pour rester discrète face au reste de la page. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #7C78C7 est le seul élément de la barre à porter du gras.
- Rien n’est hérité ici. Rien ici n’est estimé à l’œil. La spécification fixe une typographie de 13px à 64px, des sections de 100vh, des pas d’espacement de 14px et des transitions de 60ms, et le reste de la mise en page découle de ces valeurs. La liste est assez courte pour être vérifiée élément par élément. Mesurez avant d’ajuster.
- La boucle sert de fond. Le premier écran est un seul clip en 988x720, et tout le reste s’organise par-dessus. Exportez en 988x720 ou plus large et le recadrage en cover continue de fonctionner.
- Rangée du haut, une action. La barre se pose sur la composition 988x720 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Une boucle, pas une timeline
Un clip de 9,4s suffit à toute la couche d’ambiance, il joue derrière le texte, boucle sans coupure visible et ne réagit jamais au pointeur. Rien d’autre sur la page n’anime en continu, donc le média est le seul élément qui demande l’attention.
L’entrée sert de signature
L’animation d’entrée est dépensée sur un seul élément (une passe de machine à écrire compose la ligne d’introduction), et c’est ce qui évite à un premier écran chargé de paraître surchargé. L’état final est la même composition qu’une image fixe, donc rien ne dépend de l’animation jusqu’au bout. Si le texte change de longueur, l’entrée reste juste parce qu’elle travaille ligne par ligne.
L’ordre de bloc CTA
Comparez le haut de cette page avec un premier écran SaaS classique. Les deux portent un titre et une action, mais ici l’ordre de la navigation, le titre, le badge d’annonce, la ligne de statistiques et le formulaire est fixe au lieu d’un affrontement au même poids. Un lecteur SaaS reçoit l’offre avant les options.
Le gain pour un produit IA ou SaaS
No-Code Waitlist est la référence de bloc CTA pour un produit IA ou SaaS, et elle répond au problème que ce public a réellement. « A new way to think and create with computers » fait ce travail dès la première image. La palette reste disciplinée (indigo profond #020004 et bleu sourd #7C78C7) et la typographie est composée en Inter, donc rien dans la composition ne dépend d’une tendance empruntée. Quand vous briefez un build, c’est la partie à copier, une promesse au corps display et le détail de soutien tenu en dessous. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Adapter bloc CTA à votre marque
Commencez par le texte, pas par la couleur. Réécrivez « A new way to think and create with computers » en une phrase sur votre produit, puis composez-la en Inter au corps utilisé dans le brief. Gardez le cadrage des médias, il travaille autant que la typographie.
Questions fréquentes
Quelle est la longueur du prompt derrière No-Code Waitlist?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 988x720, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Quelle part de No-Code Waitlist dépend de React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que No-Code Waitlist 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.
D’où vient le design de No-Code Waitlist?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 988x720.
