Krosnoz

Shader de Transition de Scène Personnalisable (Style "Glitch" et "Venetian Blinds")

Objectif : Créer un shader de transition polyvalent qui permet de passer d'une scène A à une scène B en utilisant des effets inspirés d'After Effects comme "Glitch" et "Volet Vénitien" (Venetian Blinds).
Analogie After Effects : Il s'agit de fusionner la logique de la transition "Volet Vénitien" (avec des contrôles sur la direction et la largeur des bandes) avec des techniques de "Glitch" (décalages de blocs, aberrations chromatiques localisées) pour créer des transitions dynamiques et stylisées.
Contexte Technique : C'est un shader en une seule passe qui prend deux textures en entrée (scène A et scène B) et les mélange en fonction d'une progression. La complexité réside dans la génération du masque de transition qui n'est pas un simple dégradé, mais une combinaison de motifs géométriques et de bruit.
Structure du Projet : Vite + React + R3F + Drei + Tailwind CSS 4.

Architecture de Rendu (React/R3F) :
Créer deux scènes 3D di

Krosnoz

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons@latest/Font%20Awesome/light.min.css");:root{--accent1-light:#a95bc2;--accent1-dark:#3f2348;--accent1-light-opacity1:rgba(169,91,194,.4);--accent2-light:#00a4db;--accent2-dark:#003d52}.backgroundContainer{background-color:#010e18}.backgroundContainer.withBackdrop{background:transparent!important}.backdropContainer{filter:blur(10px) brightness(70%) saturate(110%) contrast(130%);mask-image:linear-gradient(180deg,#000,transparent);-webkit-mask-image:linear-gradient(180deg,#000,transparent)}.withTabs .content-primary{padding-top:1em!important}.scrollY{mask-image:linear-gradient(180deg,transparent,#000 1em calc(100% - 1em),transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 1em calc(100% - 1em),transparent);padding:1em 0}::-moz-selection