3D-Flächen, Szenen und Hintergründe

CSS-3D oder WebGL#

Das Kit baut Tiefe auf zwei Wegen. CSS-3D stellt echte Inhalte in den Raum, deine Screens, Karten und Texte bleiben dabei HTML, scharf, auswählbar und klickbar. WebGL malt ein Bild hinter den Inhalt, Licht, Partikel oder eine Kugel aus Punkten, Pixel für Pixel mit einem kleinen Shader.

Nimm CSS-3D, wenn der Inhalt selbst die Tiefe trägt, etwa ein Produkt-Screen im gedrehten Gerät oder Preiskarten, die sich zum Zeiger neigen. Die 3D-Flächen stehen dafür still im Raum, die 3D-Szenen bewegen sich beim Scrollen.

Nimm WebGL, wenn das Bild die Bühne für eine Aussage ist, hinter einem Hero, einem Band mit Zahlen oder dem Call to Action am Ende. Die 3D-Hintergründe nehmen deinen Inhalt als Children und legen ihn über das Bild.

• 3D-FlächenGeräte, Karten und Bühnen in echter CSS-Perspektive.
• 3D-SzenenRäume, die sich beim Scrollen bewegen.
• 3D-HintergründeLebendige WebGL-Bilder hinter deinem Inhalt.

Installieren#

Jede 3D-Component installierst du wie jede andere. aiw add holt die Helfer als Abhängigkeit mit, depth für die CSS-Flächen und webgl für die Hintergründe. Mehr braucht es nicht, die beiden Helfer sind selbst geschrieben und kommen ohne three.js aus.

aiw add @ai-website/device-3d @ai-website/shader-gradient

import { ShaderGradient } from '@/components/ui/shader-gradient';
import { Device3D } from '@/components/ui/device-3d';

<ShaderGradient scrim="left" scrimStrength={0.7} className="min-h-[560px]">
  <div className="kit-container grid items-center gap-12 py-24 md:grid-cols-2">
    <div>
      <h1>Dein Konto, in einer Hand</h1>
      <p>Überweisen, sparen und teilen, mit einem Blick auf den ganzen Monat.</p>
    </div>
    <Device3D device="phone" angle="hero" width={280} label="Banking-App auf einem Telefon">
      <img src="/app-home.avif" alt="Startscreen der App" width={390} height={844} />
    </Device3D>
  </div>
</ShaderGradient>

In Astro bekommt eine 3D-Component eine client-Direktive, damit sie läuft. client:visible passt fast immer, die Bewegung startet ohnehin erst im sichtbaren Bereich.

<!-- Ohne Direktive steht das Standbild da, fertig und ruhig -->
<ShaderGradient scrim="center">…</ShaderGradient>

<!-- Mit Direktive startet der Shader, sobald die Section ins Bild kommt -->
<ShaderGradient client:visible scrim="center">…</ShaderGradient>

Der WebGL-Helfer#

webgl ist ein schlanker Helfer ohne Bibliothek. Ein Dreieck deckt den Canvas ab, der Fragment-Shader malt jedes Pixel. Alles drumherum übernimmt der Helfer, also Größe mit gedeckelter Pixeldichte, Start im sichtbaren Bereich, Pause außerhalb und im verborgenen Tab, Theme- und Accent-Wechsel, Zeiger und Scrollen, verlorener und wiederhergestellter Kontext und das Aufräumen beim Unmount.

ShaderCanvas#

ShaderBackdrop#

Jeder Hintergrund des Kits teilt dieselben Props intensity, speed, colors, interactive, fallback und die drei Scrim-Props. Jeder Shader bekommt diese Uniforms von selbst.

Helfer für CSS-3D#

Für die CSS-Flächen und Szenen gibt es depth. Die Helfer schreiben CSS-Variablen direkt an das Element, so bewegt sich die Fläche ohne React-Render.

Text auf 3D#

Text auf einem bewegten Bild braucht Ruhe darunter. Der Scrim legt einen Schatten in der Farbe der Seite zwischen Bild und Inhalt und folgt der Form deines Textblocks. Center passt zu einer mittigen Überschrift, left zu einem Hero mit Text links, bottom zu Text am unteren Rand und soft zu Text über der ganzen Fläche. Strong deckt am meisten, für lange Absätze oder Formulare.

• Prüf den Kontrast am hellsten Moment des Bildes, mindestens 4,5 zu 1 für Fließtext und 3 zu 1 für große Überschriften.
• In einer Karte gehört der Scrim in die Kartenfarbe, also scrimColor="var(--card)".
• Am Telefon deckt der Scrim bei center und left die ganze Fläche, weil der Text dort fast die volle Breite einnimmt.
• Knöpfe und Links auf dem Bild behalten ihre volle Fläche und ihren Fokusring, der Shader nimmt nie Klicks an.

Standbild und reduzierte Bewegung#

Jede 3D-Component hat ein Standbild. Bei den Hintergründen ist es ein CSS-Bild in denselben Farben, es steht ohne JavaScript, ohne WebGL, bis zum ersten echten Bild und nach einem verlorenen Kontext da und blendet weich über. Mit fallback gibst du ein eigenes Standbild vor.

Bei reduzierter Bewegung zeichnet der Shader ein einziges ruhiges Bild und bleibt dann stehen. Die CSS-Flächen ruhen in ihrer fertigen Lage, Szenen zeigen alle Ebenen geordnet und lesbar. Auf Touch-Geräten neigt sich nichts zum Finger, die Fläche bleibt in ihrer Ausgangslage.

Leistung#

• Die Pixeldichte ist gedeckelt, 1,5 am Desktop und 1 am Telefon. Für weiche Bilder halbiert scale die Auflösung noch einmal.
• Telefone zeichnen 30 Bilder pro Sekunde mit u_quality 0,55, also weniger Ebenen und Partikel. Der Desktop läuft mit der Rate des Bildschirms.
• Ein Shader startet erst im sichtbaren Bereich, pausiert außerhalb und im verborgenen Tab und gibt beim Unmount alles frei.
• CSS-3D bewegt nur transform und opacity. Zeiger und Scrollen laufen über CSS-Variablen, nicht über React-State.
• Jede Shader-Component ist für unter 8 KB gzip und 60 Bilder pro Sekunde am Desktop gebaut. Setz sie mit client:visible ein, dann lädt ihr Code erst kurz vor dem sichtbaren Bereich.

Ein eigener Shader#

Für einen eigenen Hintergrund schreibst du nur den Fragment-Shader. GLSL_NOISE bringt hash, noise und fbm mit, ACCENT_PALETTE die Akzentfarbe mit zwei Nachbarn und einem hellen Ton. Gib das Ergebnis vormultipliziert aus, dann scheint die Seite durch, und derselbe Shader passt auf Hintergrund, Fläche und Karte.

import { ShaderCanvas, ShaderBackdrop, GLSL_NOISE, ACCENT_PALETTE } from '@/components/ui/webgl';

const FRAG = `${GLSL_NOISE}
void main(){
  vec2 p = gl_FragCoord.xy / u_res;
  float n = fbm(p * 3. + vec2(u_time * .05, 0.));
  vec3 c = mix(u_c0, u_c1, n);
  float a = smoothstep(.2, .9, n) * .6 * u_intensity;
  gl_FragColor = vec4(c * a, a);
}`;

export function Mist({ children }: { children: React.ReactNode }) {
  return (
    <ShaderBackdrop
      scrim="center"
      layer={<ShaderCanvas fragment={FRAG} colors={ACCENT_PALETTE} scale={0.5} fallback="radial-gradient(60% 60% at 50% 40%, color-mix(in oklab, var(--primary) 30%, transparent), transparent)" />}
    >
      {children}
    </ShaderBackdrop>
  );
}

• 3D in den VisualsAlle Flächen, Szenen und Hintergründe mit Live-Preview.
• MotionDie Grundregeln für Bewegung im Kit.
• Scroll-GeschichtenSzenen, die über mehrere Bildschirme erzählen.
• BarrierefreiheitKontrast, Fokus und reduzierte Bewegung im ganzen Kit.