# 50 inspirations — Refonte DA portfolio Anelya Huet Nikolova ### DA cible : « Neon Noir Cinématique » *Cheffe opératrice + réalisatrice · anelyahuetnikolova.com · vérifié sur le web le 2026-06-28* Toutes les URL ci-dessous ont été **vérifiées live**. Les récompenses sont **sourcées** quand elles existent ; sinon c'est marqué honnêtement (« référence de secteur, pas de prix web »). Voir en bas les **corrections vs la liste de Gemini** (entrées fausses/mortes écartées). --- ## 0 · La direction artistique à viser (résumé actionnable) Le piège du rose = l'aplat de fond → enfantin. La règle d'or, validée par la recherche (Cyberpunk 2077, Zajno, Tron) : **le néon pink est une SOURCE DE LUMIÈRE dans le noir, pas une couleur de remplissage.** - **Palette** — base near-black (#070708) + anthracite (#15151A). Accent unique : **néon pink** (≈ #FF2E88) utilisé en glow / contour lumineux / hover, jamais en grand aplat. Pour la touche Coppola, autoriser un **dégradé vers un rose pastel doux** sur 1-2 moments de rêverie (hero, transition). - **Lumière & texture (Blade Runner 2049)** — grain de film léger, halation/glow sur les sources, brume WebGL réactive au curseur. Modèles : Lusion, Active Theory, Immersive Garden, Resn. - **Cadrage cinéma** — ratio anamorphique 2.39:1 sur les médias, coins très légèrement arrondis. Modèles : Le Cinéma Club, NOWNESS, MUBI. - **Typo cinétique (Gaspard Noé)** — titres display géants « générique de film », transitions tranchées noir↔blanc, type variable qui mute, glitch/strobe MAÎTRISÉ. Modèles : Obys, Studio Dumbar, Pangram Pangram. - **Animation** — smooth scroll (Lenis, créé par basement.studio / Locomotive), transitions de page (Barba.js), reveals au scroll (GSAP / Framer Motion). Recette technique : Dennis Snellenberg, Olivier Larose. - **Posture éditoriale (double casquette DP + réalisatrice)** — traiter chaque projet comme un « objet de film » crédité (réal / chef op / format / année), à la Criterion / A24. Montrer **peu et grand**. Légende récompense : 🏆 = prix web vérifié récent · ★ = prix web plus ancien/projet · ◆ = référence de secteur sans prix web (qualité reconnue). --- ## A · Maisons de production & portfolios réalisateurs/DP — *sa profession (12)* Le modèle le plus direct pour une cheffe op/réalisatrice : nav vidéo plein écran, roster crédité, dark mode. 1. **Iconoclast** — https://iconoclast.tv ◆ *Prod franco-internationale (Paris), clip/pub/luxe.* À voler : sélecteur géographique + grille de reels par réalisateur en hover-play, sombre et minimal. 2. **Division** — https://www.division.global ◆ ⚠️ *Ce n'est PAS la boîte de Gaspard Noé* (erreur fréquente). C'est une prod pub haut de gamme. À voler : homepage en vidéo plein écran avec crédit réalisateur en overlay discret = le pattern « nav cinématique » exact que tu vises. 3. **Somesuch** — https://somesuch.co ◆ *Londres/LA, Palme d'Or, Cannes Lions.* À voler : page `/directors` + hiérarchie typo éditoriale qui rend un roster ultra-lisible. 4. **Academy Films** — https://www.academyfilms.com ◆ À voler : fiches **réalisateurs ET photographes séparées** — utile pour distinguer tes deux casquettes (DP / réalisatrice). 5. **Stink Films** — https://stinkfilms.com ◆ *(et Stink Studios — https://www.stinkstudios.com, volet digital primé ★)* À voler : le grain dark du player plein écran (Films) + les transitions de page fluides du case-study immersif (Studios). 6. **Partizan** — https://partizan.com ◆ *(Production Company of the Year 2022 & 2023)* À voler : esthétique brute/contrastée, navigation par réalisateur avec autoplay muet. 7. **Pulse Films** — https://pulsefilms.com ◆ À voler : catégorisation du Work par discipline (Music / Film / TV) — bon modèle pour segmenter une reel mixte. 8. **Smuggler** — https://smugglersite.com ◆ *(attention : .site, pas .com — 5 Palmes d'Or)* À voler : roster prestige plein écran, traitement très « film » du player. 9. **Object & Animal** — https://objectanimal.com ◆ *Roster art-house (FKA Twigs, Diana Kunst).* À voler : DA sombre, présentation de talents multidisciplinaires = pile ton cas DP + réalisatrice. 10. **Riff Raff Films** — https://www.riffrafffilms.tv ◆ *(« Most Creative Production Company 2025 »)* À voler : mise en avant « craft » + grille de reels épurée. 11. **Caviar** — https://caviar.tv ◆ *(Oscar « Sound of Metal », Caméra d'Or)* À voler : bascule prod commerciale / longs-métrages — bon pour montrer un spectre auteur. 12. **MJZ** — https://mjz.com ◆ *(Spike Jonze, Harmony Korine, Chris Cunningham)* À voler : la **retenue extrême** — fond quasi noir, liste de noms, le film fait tout. « Le travail parle. » --- ## B · Portfolios & studios primés, dark + kinetic — *modèle de refonte & d'animation (10)* C'est ici qu'on apprend la mécanique d'animation de la refonte. 13. **Aristide Benoist** — https://aristidebenoist.com ★ *(Awwwards SOTM 2021 + multiples SOTD)* À voler : micro-interactions WebGL chorégraphiées + transitions de page ultra-fluides sur layout minimal. 14. **Dennis Snellenberg** — https://dennissnellenberg.com 🏆 *(nominé Independent of the Year 2023, juré Awwwards 2026)* À voler : intro animée, smooth scroll (Lenis) + transitions Barba.js + micro-animations GSAP sur fond sombre. **La référence « recette » d'un portfolio solo primé.** 15. **basement.studio** — https://basement.studio 🏆 *(FWA SOTD 2025, ex-Studio Freight — créateurs de Lenis)* À voler : dark « brutalist-tech » haute perf, heros kinétiques au service de la vitesse. 16. **Locomotive** — https://locomotive.ca 🏆 *(Awwwards Agency of the Year 2025, Webby 2025)* À voler : storytelling scroll-driven et transitions léchées (créateurs de Locomotive Scroll/Lenis). 17. **Cuberto** — https://cuberto.com ★ À voler : curseur custom magnétique signature, hovers fluides, morphing SVG. 18. **Exo Ape** — https://exoape.com 🏆 *(plusieurs SOTD 2024-2025)* À voler : smooth scroll cinématographique, révélations d'images plein écran, transitions « book page ». 19. **Phantom** — https://phantom.land 🏆 *(Awwwards SOTD + Dev Award juin 2025 pour leur propre site)* À voler : grille portfolio massive, hover kinétiques sur vignettes, fond sombre techno très propre. 20. **Unseen Studio** — https://unseen.co 🏆 *(plusieurs SOTD 2024-2025, « Design Studio of the Year »)* À voler : motion éditorial percutant, typo cinétique, transitions de scroll très travaillées + audio réactif. 21. **14islands** — https://www.14islands.com 🏆 *(SOTD 2024-2025 + Dev Award)* À voler : cartes portfolio à hover subtils avec overlays en dégradé — raffinement « premium ». 22. **Olivier Larose** — https://www.olivierlarose.com ◆ À voler : sa **pédagogie** — il décortique les animations Awwwards (Next.js + Framer Motion). Référence d'implémentation pour ton dev. --- ## C · WebGL / atmosphère / lumière volumétrique — *l'ambiance Blade Runner 2049 (9)* Brume, particules, glow, profondeur de champ : la « lumière qui respire ». 23. **Lusion** — https://lusion.co 🏆 *(Awwwards Developer Site of the Year 2023, SOTD 2024)* À voler : rendu WebGL « soft » — particules/lumières réactives au curseur avec bokeh cinématique. **Le grain atmosphérique BR2049.** 24. **Active Theory** — https://activetheory.net 🏆 *(SOTD + Dev Award déc. 2024)* À voler : entrée du site pensée comme un **plan-séquence dans un volume lumineux**, dark mode total à accents néon. La plus proche de la cible Blade Runner. 25. **Resn** — https://resn.co.nz 🏆 *(SOTD mars & sept. 2025, FWA Hall of Fame)* À voler : mondes 3D denses et texturés avec brume/profondeur — remplir le cadre de matière atmosphérique. 26. **Immersive Garden** — https://immersive-g.com 🏆 *(Awwwards SOTM janv. 2025, clients LV/Cartier/Dior)* À voler : « 3D journeys » scroll-pilotées en luxe sombre — transition fluide d'une scène à la suivante, façon travelling. 27. **Merci-Michel** — https://merci-michel.com ★ *(Awwwards SOTM 2022 + multi-FWA, clients Cartier/Lacoste)* À voler : scènes WebGL atmosphériques (brume + profondeur de champ) et effets de lumière malins en CSS. 28. **Robin Payot** — https://robinpayot.com 🏆 *(Awwwards SOTD + Dev Award, spotlight Codrops 2025 — desktop-first)* À voler : galeries WebGL avec **distorsion fluide** entre projets (« image qui se liquéfie ») — idéal pour une grille de showreels. 29. **Bruno Simon** — https://bruno-simon.com ★ *(SOTD + Dev Award, référence Three.js)* À voler : moins l'esthétique (cartoon) que la **brique technique** — shaders TSL/WebGPU et lumière temps réel. 30. **Refik Anadol** — https://refikanadol.com ◆ *(artiste data/IA — inspi artistique, pas tech web)* À voler : nuages de données/particules fluides en mouvement lent = palette de « lumière qui respire » derrière un titre. 31. **Codrops / Tympanus** — https://tympanus.net/codrops/ ◆ *(boîte à outils, pas une inspi visuelle)* À voler : démos open-source à cloner — RGB shift, **film grain**, distorsion au hover, rotations 3D au scroll. Ta boîte à effets BR2049. --- ## D · Typographie cinétique / brutalisme élégant — *l'énergie Gaspard Noé (6)* Titres-générique, transitions tranchées, type qui mute, strobe maîtrisé. 32. **Obys Agency** — https://obys.agency 🏆 *(Awwwards Studio of the Year 2023, le plus décoré de la liste)* À voler : titres display géants qui se « montent » comme un générique + transitions tranchées noir↔blanc. **La référence la plus proche de Noé.** 33. **Studio Dumbar / DEPT** — https://studiodumbar.com ◆ *(référence mondiale du kinetic identity)* À voler : typographie variable pilotée par script qui se **déforme en temps réel** (lettres qui mutent) — cœur des transitions stroboscopiques maîtrisées. 34. **Pangram Pangram** — https://pangrampangram.com 🏆 *(Awwwards E-Commerce of the Year + Dev Award)* À voler : showcases de fontes en mouvement (mots qui défilent/morphent plein écran) = le « générique de film » cinétique. 35. **Grilli Type** — https://www.grillitype.com ◆ *(fonderie — GT America, GT Sectra)* À voler : « type tester » en très gros corps display que tu animes en direct — pour un bloc titre éditorial massif. 36. **ABC Dinamo** — https://abcdinamo.com ◆ *(fonderie, très réputée)* À voler : fontes variables animées (axes qui bougent) — des titres qui « respirent » en continu. 37. **Studio Lumio** — https://studiolumio.com ★ *(Awwwards Honorable Mention)* À voler : typo animée au scroll avec micro-décalages cinétiques de lettres — pour les transitions de sous-titres. --- ## E · Néon noir / cyberpunk — *le néon pink comme lumière (6)* ⚠️ **Constat de recherche honnête** : aucun site primé à dominante **néon pink/magenta sur dark** « adulte » n'a pu être confirmé. On vole donc ici le **principe** (néon = lumière) et la **teinte** se transpose en rose. Pour trouver une vraie dominante magenta, parcours les collections Awwwards *Pink* + *Dark Mode* (voir bonus). 38. **Cyberpunk 2077** — https://www.cyberpunk.net/us/en/ ◆ À voler : jaune néon + magenta sur quasi-noir où le magenta sert d'**accent lumineux** (logos, hovers), jamais d'aplat. Contraste dramatique maximal. 39. **Zajno** — https://zajno.com 🏆 *(Awwwards SOTD juillet 2023)* À voler : **le principe parfait** — UNE couleur saturée qui irradie sur near-black, glow sur les éléments actifs. *(Teinte d'origine rouge-orangé → à transposer en rose.)* 40. **Pomp&Clout** — https://pompandclout.com ◆ *(studio Brooklyn clip/AR, Ryan Staake)* À voler : l'esthétique **néon-glitch** et l'approche expérimentale du player — la réf DA la plus directe pour « Neon Noir cyberpunk ». 41. **Cyberpunk Interactive 3D Desk** — https://3dcyberroom.vercel.app/ ★ *(Awwwards Honorable Mention, mai 2025)* À voler : scène 3D WebGL cyberpunk pour l'**éclairage volumétrique dans le noir** *(palette d'origine beige/orangé → transposer)*. 42. **Tron: Ares** (site officiel Disney) — https://movies.disney.com/tron-ares ◆ *(moodboard film, pas prouesse web)* À voler : lignes lumineuses néon qui SONT la source de lumière sur noir absolu = la logique « néon = lumière » à l'état pur. 43. **Monopo Tokyo** — https://monopo.co.jp/ ★ *(SOTD Awwwards)* ⚠️ *Pas un exemple de couleur rose* — à garder pour la **qualité d'interaction/motion sur dark**, pas pour la teinte. --- ## F · Éditorial cinéphile / mélancolie pop-pastel — *l'élégance Sofia Coppola (7)* Pour adoucir le brutalisme : ratio cinéma, respiration, typo serif, rêverie. 44. **A24** — https://a24films.com/ ◆ À voler : grille de vignettes-films façon affiches en collection — traiter chaque projet comme un « objet de film » (titre/année/format). 45. **MUBI** — https://mubi.com/ ◆ À voler : fonds sombres neutres + contraste blanc, typo-reine, vide généreux. Le « dark élégant » socle, à adoucir ensuite. 46. **NOWNESS** — https://www.nowness.com/ ◆ *(front animé lourd)* À voler : mise en page **film-first** (film plein cadre + texte court latéral) — modèle direct pour tes films embed en rêverie. 47. **The Criterion Collection** — https://www.criterion.com/ ◆ À voler : traitement « édition d'auteur » — cartouches typo serif, fiches **obsessionnellement créditées** (réal/chef op/format). Idéal pour ta double casquette. 48. **AnOther Magazine / Dazed** — https://www.anothermag.com/ · https://www.dazeddigital.com/ ◆ À voler : mise en page magazine (chapô serif, photo pleine page, respiration) = le ton « luxe » sans froideur. 49. **Le Cinéma Club** — https://www.lecinemaclub.com/ ◆ À voler : **« un film à la fois »**, plein cadre, ratio cinéma respecté. Radicalité de la curation : montrer peu, montrer grand. 50. **Welcome to the House of Gucci** (Aristide Benoist) — https://houseofgucci.aristidebenoist.com/ 🏆 *(Awwwards SOTD 13/04/2022)* À voler : palette resserrée noir/blanc/or, WebGL en mouvements lents, storytelling cinématique. Le **meilleur cas « marque de film/luxe » primé et concret** — habiller le Neon Noir d'une dorure feutrée. --- ## Bonus · Galeries où chasser des références fraîches (hors des 50) - **Awwwards** — collections ciblées : https://www.awwwards.com/websites/pink/ · https://www.awwwards.com/awwwards/collections/dark-mode/ - **The FWA** — https://thefwa.com (le plus expérimental) - **CSS Design Awards** — https://www.cssdesignawards.com - **Godly** — https://godly.website (curation dark/expérimentale d'élite) - **Brutalist Websites** — https://brutalistwebsites.com - **Webby Awards** — https://www.webbyawards.com - **It's Nice That** — https://www.itsnicethat.com 🏆 *(Webby 2020)* — veille création. - **Klim Type Foundry** — https://klim.co.nz · **Pentagram** — https://www.pentagram.com *(typo éditoriale/structure, moins « Noé »).* --- ## Corrections notables vs la liste de Gemini - **Division ≠ Gaspard Noé.** Gemini l'a présentée comme « la maison de prod de Gaspard Noé » : faux. Sa vraie société est *Les Cinémas de la Zone*, sans site portfolio exploitable. Division reste une excellente réf (nav vidéo). - **Studio Freight n'existe plus sous ce nom** → c'est **basement.studio**. - **Dogstudio** a été absorbé par **DEPT** (plus de site studio autonome). - **Watson/DG** : agence défunte → écartée. - **Robin Mastromarino** : site mort (boucle de redirection) → remplacé par **Lusion**. - **Kuba Michalski** : aucun portfolio WebGL primé vérifiable (probable confusion de nom) → remplacé par **Merci-Michel**. - Entrées Gemini #44-46 (« cherche tel tag sur Awwwards ») : ce ne sont pas des sites → déplacées dans le Bonus. - Plusieurs noms Gemini non vérifiables/obscurs (Pioneer Corn, Godmorgon, Akins Parker, Bakar, Opatillo, Thibaud Allie, Jesper Landkoer, Kuon Yagi…) : écartés au profit de sites confirmés live + primés récemment. - **Honnêteté couleur** : aucun site primé à dominante *néon pink sur dark* « non-enfantin » n'a été confirmé. La catégorie E fournit le **principe** (néon = lumière) ; la teinte rose est à appliquer en refonte.