Crédit

Crédit DESIGN FICTION

Images utilisés

Les images d'écouteurs et accessoires proviennent de ChatGPT plus exactement Sora. L'image du téléphone est un mockup disponible gratuitement sur le site Freepik. Ce qui va suivre sont les prompts utilisés dans Sora.

Black wireless earphones with a design similar to the AirPods but looking a bit more futuristic with a white background and we can see the elements better

fusionne moi moi l'écouteur de gauche dans chaque image. la première image, garde le design et la deuxième image garde moi la disposition des éléments dans l'écouteur. Il faut que tu me fasses un écouteur sans fil

change moi l'emplacement de la tige de l'écouteur pour qu'il corresponde plus à celui des airpods pro, garde le reste du design comme tel

garde moi le design mais change moi l'ergonomie pour celui des airpods pro donc changer les emplacements de lambou par rapport à là où est la tige

imagine moi l'autre coté de cet écouteur

fait moi le boitier de cet écouteur

retire moi les écouteurs du boitier

fait moi un cable type-c vers type-c enroulé en noir sur fond blanc

Les textes

Les textes ont été écrit par moi et corrigé syntaxiquement par ChatGPT .

Le design

Le design provient de moi. Je me suis inspiré du site d'Apple sur leur écouteurs Airpods Pro 2

Le code

Le code HTML et CSS ont été fait par moi et j'ai été aidé par ChatGPT pour le JavaScript. Ce qui va suivre sont les prompts utilisés.

j'aimerai faire une section commentaire/avis dans mon site web sur mobile comme ça avec une barre en dessous qui dit où tu en es comme dans l'image, comment je fais ça ? je fais un flex horizontale avec les 4 commentaires, ça va aller en horizontal puis je bloque le overflow puis quoi ?

pour la version pc tu me proposes quoi ?

comment faire un carrousel infini donc une boucle

quand on scroll pour faire une animation sur une page web on utilise quoi et c'est quoi comme élément c'est une vidéo qu'on fait avancé en scrollant ou tu dois définir manuellement le trajet ?

donc imaginons j'ai une vidéo, je mets un scroll de début, la vidéo est à sa frame 1 et je mets un scroll de fin qui est la dernière frame de vidéo. ça veut dire que le truc va gérer les images entre le début et la fin ?

donc vas'y dis moi comment faire pour faire un scroll animation par rapport à ma vidéo et fait moi étape par étape

alors ce que tu me proposes fonctionne plus ou moins mais c'est saccadé, c'est pas fluide, j'amerai que quand je scroll un coup, ça me fasse une animation, par exemple, un scroll fait passer 1 seconde, et plus tu scrolls vite, plus l'animation va vite

alors, quand je scroll d'un tick, je dois attendre 1 seconde que la vidéo s'actualise et en plus il n'y a pas d'animation. si tu veux un exemple d'animation vidéo sur le web, il y a apple avec leur airpods pro 2

comment générer les images à partir de ma vidéo ?

c'est bon, fait moi le tuto pour faire comme apple avec les images

ok c'est good. maintenant, quand je scroll, l'animation se fait comme il faut c'est parfait MAIS ça scroll également dans ma page, il faudrait que ça bloque le scroll jusqu'à que l'animation soit fini pour pouvoir ensuite pouvoir aller scroll dans la page

comment faire en html/css/js pour que que quand j'appuis sur une forme que j'ai crée, un rond qui est une div, ça change une image en particulier. par exemple un produit est de couleur noir et quand je clique sur le rond blanc, le produit devient blanc et vice versa

décris moi le fonctionnement graphique du site d'apple sur leur airpods pro 2, quand on scroll ?

j'aimerai avoir la même chose sur mon site en html/css/js quand je scroll, les élements apparaisse et disparaisse au fur et à mesure où je suis dans le site. avec gsap ?, j'ai des sections