Glass Lab · sratzel.dev

01

CURSOR_LINSE

Derselbe Stack mit border-radius: 50%, positioniert unter deinem Pointer. Beweg den Cursor über die Bühne und die Linse verbiegt alles, was unter ihr durchläuft. Sonst hat sich nichts geändert und jeder Regler aus dem Playground funktioniert auch hier.

LINSENGRÖSSE 180pxDISPLACEMENT 60BLUR 2pxTINT 0.20 SHEEN GRAIN

SO IST ES GEBAUT [+]

/* the lens is the identical stack, just round and pointer-driven */
.lens {
  border-radius: 50%;
  pointer-events: none; /* never blocks the stage */
}
/* JS: one pointermove handler, transform only
   lens.style.transform =
     translate(cursorX - centerX, cursorY - centerY) */

02

ECHTER_CONTENT

Neonblobs machen Refraktion leicht sichtbar, aber auch leicht zu faken. Hier liegt das Glas über einem ganz normalen scrollenden Artikel. Wenn sich der Text an den Kanten verzerrt, ist der Effekt echt und nicht in ein Hintergrundbild eingebacken.

ÜBER DEN BAU VON GLAS

Echtes Glas macht drei Dinge mit der Welt dahinter: Es bricht Licht an seinen Kanten, es streut ein wenig davon und es fängt Highlights auf seinem Rand. Das meiste CSS-Glassmorphism macht nur das Mittlere, weshalb so viel davon wie ein graues Rechteck mit Blur aussieht.

DIE KANTEN VERKAUFEN ES

Die Displacement-Map ist dort am stärksten, wo der Noise-Gradient am steilsten ist. Die Verzerrung konzentriert sich also an den Kanten der Fläche, genau dort, wo eine echte Linse am meisten verzerrt. Die Mitte bleibt lesbar. Dieser Zufall von feTurbulence macht den ganzen Trick glaubwürdig.

Typografie ist der härteste Test. Ein Gradient versteckt kleine Fehler. Eine Textzeile nicht: Jede Glyphe hat eine messerscharfe Kante und dein Auge weiß genau, wie sie aussehen muss. Wenn Glas einen Absatz übersteht, übersteht es alles.

HALT ES GÜNSTIG

Eine Displacement-Map, zwei Pseudoelemente, null JavaScript im Render-Loop. Der Browser rastert das Noise einmal und der Compositor erledigt den Rest. Sobald du den Filter selbst animierst, stirbt die Illusion bei fünfzehn Frames pro Sekunde.

ÜBER DEN BAU VON GLAS

Echtes Glas macht drei Dinge mit der Welt dahinter: Es bricht Licht an seinen Kanten, es streut ein wenig davon und es fängt Highlights auf seinem Rand. Das meiste CSS-Glassmorphism macht nur das Mittlere, weshalb so viel davon wie ein graues Rechteck mit Blur aussieht.

DIE KANTEN VERKAUFEN ES

Die Displacement-Map ist dort am stärksten, wo der Noise-Gradient am steilsten ist. Die Verzerrung konzentriert sich also an den Kanten der Fläche, genau dort, wo eine echte Linse am meisten verzerrt. Die Mitte bleibt lesbar. Dieser Zufall von feTurbulence macht den ganzen Trick glaubwürdig.

Typografie ist der härteste Test. Ein Gradient versteckt kleine Fehler. Eine Textzeile nicht: Jede Glyphe hat eine messerscharfe Kante und dein Auge weiß genau, wie sie aussehen muss. Wenn Glas einen Absatz übersteht, übersteht es alles.

HALT ES GÜNSTIG

Eine Displacement-Map, zwei Pseudoelemente, null JavaScript im Render-Loop. Der Browser rastert das Noise einmal und der Compositor erledigt den Rest. Sobald du den Filter selbst animierst, stirbt die Illusion bei fünfzehn Frames pro Sekunde.

SO IST ES GEBAUT [+]

/* the article exists twice; the track slides up by exactly one copy */
.track {
  animation: scroll 40s linear infinite;
}
@keyframes scroll {
  to { transform: translateY(-50%); }
}
/* the track has no fixed height, so -50% = one full copy = a seamless loop */

03

GENÄHTES_GLAS

Der Stack ist ein System, kein Einzeltrick. Füg eine Ebene hinzu, eine gestrichelte Naht mit Abstand zur Kante, und dasselbe Glas wirkt wie ein Flicken, der auf die Seite genäht ist. Gebaut für ein Handmade-Brand-Projekt; die Naht ist nur ein Border auf einer extra Ebene.

SO IST ES GEBAUT [+]

/* one extra layer: a dashed border inset from the edge */
.seam {
  position: absolute; inset: 9px; pointer-events: none;
  border: 2px dashed #FF3B00;
  border-radius: calc(1.5rem - 8px); /* follows the glass radius */
}

04

DAS_MODAL

Die Falle, die mich Stunden gekostet hat: Der Glas-Tint ist ein festes dunkles rgba und funktioniert im Light Mode nur, weil er über einem hellen Backdrop liegt. Leg einen festen dunklen Scrim hinter ein Modal und die Karte wird dunkel, während der Text auf dunkel umschaltet. Unsichtbar. Der Scrim muss theme-aware sein, niemals das Glas.

SO IST ES GEBAUT [+]

/* THE FIX: the scrim adapts to the theme, the glass never does */
.scrim { background: rgba(202, 202, 210, 0.72); } /* light mode */
html.dark .scrim { background: rgba(4, 4, 7, 0.58); }

/* a fixed dark scrim makes the card dark while the text
   switches to dark. invisible. hours lost. */

05

CHROMATISCHE_ABERRATION

Die Version, die nie live ging. Den Backdrop in R, G und B aufzuteilen und jeden Kanal unterschiedlich stark zu verschieben, ergibt echtes Lens-Fringing und lässt das Displacement dreimal pro Frame laufen. Neun dieser Karten haben eine Seite katastrophal ruckeln lassen. Eine, hinter einem Toggle, ist ein Museumsstück.

AKTIVIEREN AUF EIGENE GEFAHR

SO IST ES GEBAUT [+]

<filter id="chroma" x="-25%" y="-25%" width="150%" height="150%">
  <!-- isolate each channel, displace each by a different amount -->
  <feColorMatrix in="SourceGraphic" values="R only" result="srcR" />
  <feDisplacementMap in="srcR" in2="soft" scale="72" result="dispR" />
  <!-- same for G (60) and B (48) ... -->
  <feBlend in="dispR" in2="dispG" mode="screen" result="rg" />
  <feBlend in="rg" in2="dispB" mode="screen" />
</filter>