adam/tripoli.cloud
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refonte du fond de la page de connexion : vrai diaporama génératif
All checks were successful
CI / build-and-test (push) Successful in 2m17s
Details
CI / deploy (push) Successful in 3m23s
Details

Browse source 
Le système de crossfade existait déjà mais avec 3 dégradés plats
placeholder (commentaire explicite : "à remplacer par de vraies
images"). Remplacé par un fond génératif plus riche, à la demande de
l'utilisateur (design jugé "moche", contraste douteux sur certains
postes) :

- 4 scènes (taches de couleur floutées, palette sourde) qui dérivent
  lentement (@keyframes tc-drift, respecte prefers-reduced-motion) et
  s'enchaînent en fondu toutes les 8s.
- Grain léger (SVG feTurbulence, mix-blend-overlay) contre l'effet
  "dégradé plat".
- Scrim en deux passes (voile uniforme + dégradé directionnel) : le
  texte reste lisible quelle que soit la scène ou la position, plutôt
  que de dépendre d'un seul dégradé ancré à gauche.

Pas de photo tierce (droits, dépendance externe) - art génératif en
CSS/SVG, cohérent avec le ton "coffre-fort minimaliste" du reste de
l'interface.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Adam Belkacemi 2026-09-21 21:36:12 +02:00
parent a639b705a6
commit c5147f5cb0
4 changed files with 106 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

44
app/src/components/auth/AuthBackground.tsx
View file

@ -1,4 +1,4 @@
import { BACKGROUND_IMAGES } from '../../lib/backgrounds';
import { BACKGROUND_SCENES } from '../../lib/backgrounds';
import { useBackgroundCrossfade } from '../../hooks/useBackgroundCrossfade';
export function AuthBackground() {
@ -6,15 +6,43 @@ export function AuthBackground() {
return (
<div className="absolute inset-0 overflow-hidden bg-[#07080c]">
{BACKGROUND_IMAGES.map((bg, i) => (
{BACKGROUND_SCENES.map((scene, i) => (
<div
key={bg}
className="absolute inset-0 scale-105 bg-cover bg-center transition-opacity duration-[2000ms] ease-in-out"
style={{ background: bg, opacity: i === activeIndex ? 1 : 0 }}
/>
key={scene.id}
className="absolute inset-0 transition-opacity duration-[2400ms] ease-in-out"
style={{ opacity: i === activeIndex ? 1 : 0 }}
>
{scene.blobs.map((blob, bi) => (
<div
key={bi}
className="tc-drift absolute rounded-full blur-[90px]"
style={{
top: blob.top,
left: blob.left,
width: blob.size,
height: blob.size,
background: blob.color,
animationDelay: `${bi * -7}s`,
}}
/>
))}
</div>
))}
<div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(6,7,11,0.92)_0%,rgba(6,7,11,0.62)_46%,rgba(6,7,11,0.28)_100%)]" />
<div className="absolute -right-[8%] -top-[18%] h-[52vw] w-[52vw] rounded-full bg-[radial-gradient(circle,rgba(91,140,255,0.26)_0%,transparent_66%)] blur-[10px]" />
{/* Grain léger : casse l'effet "dégradé plat", donne une texture
plus organique - technique courante sur les fonds génératifs. */}
<svg className="absolute inset-0 h-full w-full opacity-[0.05] mix-blend-overlay" aria-hidden="true">
<filter id="tc-grain">
<feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch" />
</filter>
<rect width="100%" height="100%" filter="url(#tc-grain)" />
</svg>
{/* Scrim en deux passes : un voile uniforme (garantit le contraste du
texte quelle que soit la position des taches de couleur) plus un
dégradé directionnel plus marqué côté texte. */}
<div className="absolute inset-0 bg-[#07080c]/48" />
<div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(6,7,11,0.74)_0%,rgba(6,7,11,0.44)_46%,rgba(6,7,11,0.22)_100%)]" />
</div>
);
}