{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "verlaufs-rahmen", "name": "Animierter Verlaufsrahmen", "name_en": "Animated gradient border / conic border beam", "kurz": "Ein Lichtstreif läuft über die 1,5-px-Kante der einen Karte, die zählen soll: conic-gradient mit registriertem Winkel, ohne Fläche zu beanspruchen.", "kategorie": "Glas & Material", "kategorie_slug": "glas-material", "kategorie_nr": 10, "bau_chat": "C5", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "website_belege": 1, "stimmung": [ "präzise", "laut" ], "stimmung_roh": [ "technisch", "energiegeladen", "modern" ], "technik": [ "css", "@property", "conic-gradient" ], "technik_gruppen": [ "css" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Ein Licht läuft um den Rahmen eines einzelnen Elements. Technik: Die Custom Property --angle per @property registrieren (syntax '', inherits: false, initial-value 0deg). Der Rahmen besteht aus zwei Hintergründen: innen die Kartenfarbe als padding-box, darunter ein conic-gradient(from var(--angle), transparent 70%, var(--accent), transparent) als border-box. Dazu border: 1px solid transparent. Eine @keyframes-Animation dreht --angle linear von 0 auf 360deg, eine Umdrehung dauert 3 bis 6 Sekunden.", "warum_es_wirkt": "Das Auge folgt Bewegung, und hier bewegt sich nur eine Kante. So bekommt ein Element Aufmerksamkeit, ohne mehr Fläche zu brauchen. Es wirkt wie Licht, das über eine Kante wandert.", "wann_einsetzen": "Für genau ein hervorgehobenes Element pro Ansicht: empfohlener Tarif, Hauptangebot, Call-to-Action, aktives Feature. Außerdem für ein Eingabefeld im Fokus und für KI- oder Ladezustände.", "wann_nicht": "Nicht auf allen Karten gleichzeitig, das wirkt wie ein Rummelplatz. Nicht als Daueranimation direkt neben langem Lesetext. Nicht für ruhige Marken, die auf Verläufe verzichten, außer sehr leise und in Hausfarben. Am Button nicht als Daueranimation und nie auf mehreren Buttons einer Seite.", "varianten": [ "Lichtlauf: breiter Lichtstreif dreht dauerhaft", "Border-Beam: nur ein kurzer Lichtpunkt wandert um den Rahmen, optional mit Glow über ein unscharfes Duplikat", "Nur bei Hover oder Fokus: das Licht steht und läuft erst bei Berührung", "Statischer Verlaufsrahmen mit Lichtkante oben", "Pulsierender Rahmen (Paper Shaders: Pulsing border)", "background-clip: border-area (ab Chrome 150): Verlauf nur in der Rahmenlinie, die Karte darf durchscheinen (Glas), gestrichelte Verlaufsrahmen möglich; Rückfall per Maske (mask-composite: exclude)", "Als Button: Lichtlauf um eine Pille nur bei Hover, Fokus und Laden, in Ruhe eine stehende Lichtkante (Prinzip Shimmer- und Moving-Border-Button)" ], "umsetzung": "@property wird seit 2024 von allen Engines unterstützt. Ohne Registrierung kann der Browser den Winkel nicht interpolieren, er springt dann nur. Die padding-box/border-box-Technik funktioniert sauber mit border-radius. Alternative: ein Pseudo-Element mit mask-composite: exclude. Für einen Glow ein unscharfes Duplikat des Verlaufs mit filter: blur() hinter das Element legen. Weil inherits: false gilt, braucht das Duplikat dieselbe Animation. Außerhalb des Bildschirms die Animation per IntersectionObserver anhalten. Resend nutzt die Technik an Buttons, mit hover:scale-105 in 150 ms.", "mobil": "Läuft unverändert. Eine Hover-Variante braucht auf Touch einen Ersatz, etwa eine Umdrehung nach dem Antippen.", "reduzierte_bewegung": "Keine Rotation. Stattdessen ein stehender Verlaufsrahmen mit Lichtkante oben.", "barrierefreiheit": "Nicht als einziges Fokus-Signal verwenden. Zusätzlich einen echten outline-Fokus setzen. Der Rahmen ist Schmuck und braucht keinen Text für Screenreader." }, "messwerte": { "easing": "linear", "dauer_ms": "3000–6000 pro Umdrehung", "stagger_ms": "", "distanz": "Rahmen 1–1.5px", "sonstiges": "Resend: padding-box/border-box-Technik, Winkel über Custom Property --angle; Hover-Scale 1.05 in 150 ms", "herkunft": "beobachtet", "quelle": "https://resend.com/" }, "kurve": { "bezier": [ 0, 0, 1, 1 ], "css": "cubic-bezier(0, 0, 1, 1)", "name": "linear", "dauer_ms": 6000 }, "gesehen_bei": [ { "seite": "Resend", "url": "https://resend.com/", "auszeichnung": "", "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Button-Rahmen per Doppelhintergrund background: padding-box var(--bg-color), border-box var(--border-color) mit --border-color: conic-gradient(from var(--angle) at 50% 50%, …); hover:scale-105, transition-transform 150ms ease-in-out.", "art": "website" } ], "tutorials": [ { "titel": "Paper Shaders – Pulsing border", "url": "https://shaders.paper.design/" } ], "kombinierbar_mit": [ "karten-spotlight-glow", "linien-punkt-raster" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/", "meta": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/meta.json", "demo": "https://cecodesign.de/lab/fundus/glas-material/verlaufs-rahmen/demo" }, "herkunft": { "quelldateien": [ "material3d.json", "patch-belege-2.json" ], "pruefnotizen": [ "patch-belege-2.json: 1 Produktionsbeleg." ] }, "bau": { "status": "fertig", "kurz": "Ein Lichtstreif läuft über die 1,5-px-Kante der einen Karte, die zählen soll: conic-gradient mit registriertem Winkel, ohne Fläche zu beanspruchen.", "demo": true, "abhaengigkeiten": [], "werte": { "technik": "@property --winkel { syntax: ''; inherits: false; initial-value: 0deg }; background: linear-gradient(karte, karte) padding-box, conic-gradient(from var(--winkel), …) border-box; border: 1.5px solid transparent", "rahmen": "1.5px", "easing": "linear", "dauer_ms": { "lichtlauf": 6000, "lichtpunkt": 4000, "hover": 6000 }, "keyframes": "@keyframes drehen { to { --winkel: 360deg } }, infinite", "verlauf_lichtlauf": "conic-gradient(from var(--winkel), rgba(254,242,227,.26) 0% 52%, #a3b08f 70%, #fef2e3 83% 89%, rgba(254,242,227,.26) 97% 100%)", "verlauf_lichtpunkt": "conic-gradient(from var(--winkel), rgba(254,242,227,.26) 0% 86%, #a3b08f 90%, #fef2e3 93%, rgba(254,242,227,.26) 96% 100%)", "glow": "::before, inset -1.5px, z-index -1, gleicher Verlauf mit transparent statt Grundlinie (Lichtlauf: transparent 0% 56%, #a3b08f 72%, #fef2e3 84% 89%, transparent 97% 100%); Lichtlauf blur 16px / opacity .95, Lichtpunkt blur 10px / opacity 1, Hover in Ruhe opacity .2", "hover_variante": "animation-play-state: paused, running bei :hover / :focus-within; Glow-Deckkraft .2 → .95 in 400 ms cubic-bezier(0.4, 0, 0.2, 1)", "andere_karten": "border 1px rgba(254,242,227,.13), Hover rgba(254,242,227,.26) in 400 ms cubic-bezier(0.4, 0, 0.2, 1)", "ui": "Knöpfe und Felder 150–200 ms cubic-bezier(0.4, 0, 0.2, 1)", "reduziert_verlauf": "linear-gradient(180deg, #fef2e3 0%, #a3b08f 18%, rgba(254,242,227,.26) 46% 100%) border-box", "farben": { "grund": "#2b2724", "karte": "#35302c", "karte_hervor": "#3a3430", "licht": "#fef2e3", "schilf": "#a3b08f", "leise": "#a79f94" }, "schriften": "Newsreader (opsz 72, wght 300, h1 clamp(2.5rem, 1.5rem + 4vw, 4.25rem), Laufweite -0.015em, Zeilenhöhe 1.05), Mona Sans (Labels 0.75rem versal, font-stretch 125 %, Laufweite 0.06em; Fließtext 1.0625rem / 1.6)", "sparen": "IntersectionObserver hält die Animation außerhalb des Bildschirms an (animation-play-state: paused)" }, "ausloeser": "dauer", "touch": "Lichtlauf und Lichtpunkt laufen unverändert. Die Variante „Bei Hover“ läuft nach dem Antippen eine Umdrehung (6000 ms). Unter 900 px steht die hervorgehobene Karte zuerst und über die volle Breite. border-area-Variante: Plan-Karten untereinander, die hervorgehobene zuerst; Bei Hover läuft nach Antippen eine Runde.", "reduziert": "Keine Rotation: stehender Verlaufsrahmen mit Lichtkante oben (linear-gradient 180deg, Creme → Schilf → Grundlinie) und schwachem Glow oben, in allen Varianten gleich. border-area-Variante: Ring steht, Ablage ohne Lauf.", "korrekturen": { "beschreibung": "Ein Licht läuft um den Rahmen eines einzelnen Elements. Technik: Die Custom Property --angle per @property registrieren (syntax '', inherits: false, initial-value 0deg). Der Rahmen besteht aus zwei Hintergründen: innen die Kartenfarbe als padding-box, darunter ein conic-gradient(from var(--angle), transparent 70%, var(--accent), transparent) als border-box. Dazu border: 1px solid transparent. Eine @keyframes-Animation dreht --angle linear von 0 auf 360deg, eine Umdrehung dauert 3 bis 6 Sekunden.", "warum_es_wirkt": "Das Auge folgt Bewegung, und hier bewegt sich nur eine Kante. So bekommt ein Element Aufmerksamkeit, ohne mehr Fläche zu brauchen. Es wirkt wie Licht, das über eine Kante wandert.", "wann_einsetzen": "Für genau ein hervorgehobenes Element pro Ansicht: empfohlener Tarif, Hauptangebot, Call-to-Action, aktives Feature. Außerdem für ein Eingabefeld im Fokus und für KI- oder Ladezustände.", "wann_nicht": "Nicht auf allen Karten gleichzeitig, das wirkt wie ein Rummelplatz. Nicht als Daueranimation direkt neben langem Lesetext. Nicht für ruhige Marken, die auf Verläufe verzichten, außer sehr leise und in Hausfarben. Am Button nicht als Daueranimation und nie auf mehreren Buttons einer Seite.", "varianten": [ "Lichtlauf: breiter Lichtstreif dreht dauerhaft", "Border-Beam: nur ein kurzer Lichtpunkt wandert um den Rahmen, optional mit Glow über ein unscharfes Duplikat", "Nur bei Hover oder Fokus: das Licht steht und läuft erst bei Berührung", "Statischer Verlaufsrahmen mit Lichtkante oben", "Pulsierender Rahmen (Paper Shaders: Pulsing border)", "background-clip: border-area (ab Chrome 150): Verlauf nur in der Rahmenlinie, die Karte darf durchscheinen (Glas), gestrichelte Verlaufsrahmen möglich; Rückfall per Maske (mask-composite: exclude)", "Als Button: Lichtlauf um eine Pille nur bei Hover, Fokus und Laden, in Ruhe eine stehende Lichtkante (Prinzip Shimmer- und Moving-Border-Button)" ], "umsetzung": "@property wird seit 2024 von allen Engines unterstützt. Ohne Registrierung kann der Browser den Winkel nicht interpolieren, er springt dann nur. Die padding-box/border-box-Technik funktioniert sauber mit border-radius. Alternative: ein Pseudo-Element mit mask-composite: exclude. Für einen Glow ein unscharfes Duplikat des Verlaufs mit filter: blur() hinter das Element legen. Weil inherits: false gilt, braucht das Duplikat dieselbe Animation. Außerhalb des Bildschirms die Animation per IntersectionObserver anhalten. Resend nutzt die Technik an Buttons, mit hover:scale-105 in 150 ms.", "mobil": "Läuft unverändert. Eine Hover-Variante braucht auf Touch einen Ersatz, etwa eine Umdrehung nach dem Antippen.", "reduzierte_bewegung": "Keine Rotation. Stattdessen ein stehender Verlaufsrahmen mit Lichtkante oben.", "barrierefreiheit": "Nicht als einziges Fokus-Signal verwenden. Zusätzlich einen echten outline-Fokus setzen. Der Rahmen ist Schmuck und braucht keinen Text für Screenreader." }, "geprueft": "02.11.2026", "notiz": "Angebotsseite der erfundenen Remise Seelinde, Gästehaus am Heiligen See in Potsdam (Rezept boutique-hotel-gastgeber: Newsreader + Mona Sans, warmes Dunkel, Creme, Schilfton). Von drei Paketkarten leuchtet nur „Seezimmer mit Steg“ (Direktbuchung), die Buchungsleiste bleibt bewusst ohne Licht. Das Rezept verbietet Verläufe und Gold; deshalb ist der Verlauf nur 1,5 px breit, in Creme und Schilf statt Gold, und sitzt auf einem einzigen Element. Umschalter Lichtlauf (6000 ms), Lichtpunkt/Border-Beam (4000 ms) und Bei Hover. Glow per unscharfem ::before mit eigener, gleich getakteter Animation. Eigene SVG-Abendszenen statt Fotos. vorfuehren() zeigt nacheinander alle drei Varianten, bei Hover fährt ein gedachter Zeiger auf die Karte (21 s pro Runde). AD-Review 01.11.2026: Note 4 (Lichtlauf breiter und heller, Glow 16 px / .95, damit der Effekt auch in der Vorschau deutlich ist). Varianten 01.11.2026: Umschalter „Variante“ (?v=basis|saas) und in der Variante „Technik“ (border-area / Rückfall: Maske). saas (Rezept saas-produkt-praezise, der einzige Rezeptbezug des Musters): erfundene Schichtplanung Schichtbrett, Preisstufen als Glas-Karten über einem gezeichneten Dienstplan, „Team“ mit Ring per background-clip: border-area, Import-Ablage mit gestricheltem Verlaufsrahmen. Headless-Chromium (153) kann border-area; Rückfall geprüft per Umschalter und mit abgeschaltetem @supports. Korrektur 02.11.2026: Variante button (?v=button, Rezept kurs-coaching-lernweg): Anmeldekarte der erfundenen Podcastwerkstatt Feldmann (Fürth), Pillen-CTA „Platz sichern“ mit Lichtkante in Ruhe, Lichtlauf 3000 ms nur bei Hover, Fokus und Laden; Zustände Druck, deaktiviert (März ausgebucht, aria-disabled mit Warteliste) und Laden mit Statusmeldung. Knopftexte (knopf) für alle Varianten gesetzt. Kontrastmodus-Rahmen für Umschalter und Buchungsleiste ergänzt.", "varianten": [ { "id": "basis", "name": "Padding-Box-Trick (Hotel)", "wann": "Ein einzelnes Angebot auf deckender Karte hervorheben, läuft in allen Browsern: Hotel, Gastro, Kurs, Shop. Unterumschalter Licht: Lichtlauf, Lichtpunkt, Bei Hover.", "werte": { "rezept": "boutique-hotel-gastgeber", "technik": "linear-gradient(karte) padding-box + conic-gradient(from var(--winkel)) border-box, border 1.5px transparent", "dauer_ms": { "lichtlauf": 6000, "lichtpunkt": 4000 }, "glow": "::before blur 16px / .95" }, "knopf": "Padding-Box" }, { "id": "saas", "name": "background-clip: border-area (Glas-Preiskarte)", "wann": "SaaS und Produktseiten, wenn die Karte durchscheinen soll (Glas über Produktoberfläche) oder der Rahmen gestrichelt ist: Preisstufe, Upload-Zone, Feature-Karte. Greift ab Chrome/Edge 150 und Safari 18.2, sonst (Firefox) Rückfall per Maske.", "werte": { "rezept": "saas-produkt-praezise", "technik": "background-image: var(--ring), linear-gradient(var(--glas), var(--glas)); background-origin: border-box; background-clip: border-area, padding-box; background-color: transparent; border 1.5px solid transparent; nur in @supports (background-clip: border-area)", "ab": "Chrome/Edge 150 (Chrome-Release-Notes 150), Safari 18.2 (WebKit hatte es zuerst; Web Features Explorer); Firefox: Rückfall", "rueckfall": "::after, inset -1.5px, padding 1.5px, background var(--ring) border-box, mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) (-webkit-mask-composite: xor), eigene Animation", "ring": "conic-gradient(from var(--winkel), #34383b 0 48 %, #5554e8 66 %, #c9c8ff 80 %, #fff 87 %, #34383b 97 % 100 %); Lichtpunkt #34383b 0 85 %, #7170ff 89,5 %, #fff 93 %, #34383b 96,5 %", "dauer_ms": { "lichtlauf": 6000, "lichtpunkt": 4000, "ablage_hover": 4000 }, "glas": "rgba(22, 23, 24, .58), backdrop-filter blur(14px) saturate(1.2), Radius 16px; dahinter Schichtplan-Oberfläche als SVG", "gestrichelt": "Ablage: border 1.5px dashed transparent, linear-gradient(90deg, #4a4d53, #6d6cf0 50 %, #4a4d53) in border-area; bei Hover oder dragover der laufende Ring; Rückfall: dashed #3a3e43, Hover #7170ff", "glow": "keiner (Rezept: kein Glow, kein Aurora)", "schrift": "Geist 600 h1 clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem) -0.022em, Geist Mono Labels", "farben": "#08090a Grund, #0c0d0e Bühne, #f7f8f8 Text, #8a8f98 Meta, #242728 Linien, #7170ff Marke", "umschalter": "Technik: border-area / Rückfall: Maske (zeigt den Rückfall auch in Browsern mit border-area)" }, "knopf": "border-area" }, { "id": "button", "name": "Lichtlauf um eine Pille (Kurs-Anmeldung)", "knopf": "Button", "wann": "Für genau einen Haupt-Button pro Seite (Platz sichern, Testen, Anmelden) in Marken mit Hausfarben: Kurs, SaaS, Event. Das Licht läuft nur bei Hover, Fokus und während des Ladens, in Ruhe steht eine Lichtkante. Nicht für mehrere Buttons nebeneinander, nicht in Marken ohne Hausfarben.", "werte": { "rezept": "kurs-coaching-lernweg", "technik": "button: background linear-gradient(#141414, #141414) padding-box, var(--ring) border-box; border 1.5px solid transparent; border-radius 999px; Höhe 52 px; @property --winkel wie Grundvariante", "ruhe": "--ring: linear-gradient(180deg, #b9c5ff 0%, #5d6aa8 22%, #2b2f3d 48%, #2b2f3d 100%) (stehende Lichtkante oben)", "lauf": "nur bei :hover, :focus-visible und [data-laedt]: conic-gradient(from var(--winkel), #2b2f3d 0% 68%, #7491ff 80%, #f7c325 88%, #ffffff 92%, #2b2f3d 97% 100%), animation drehen 3000ms linear infinite", "glow": "::before inset -1.5px, z-index -1 (Karte mit isolation: isolate), conic-gradient(from var(--winkel), transparent 0% 70%, #7491ff 82%, #f7c325 90%, transparent 97% 100%), blur 12px, opacity 0 → .8 in 400 ms cubic-bezier(0.4, 0, 0.2, 1), gleiche Animation", "druck": ":active scale(.985) translateY(1px) in 90 ms, zurück 450 ms cubic-bezier(0.34, 1.56, 0.64, 1) (token-federnd-verspielt)", "pfeil": "translate 3px 0 bei Hover, 150 ms", "fokus": "outline 2px #141414, Abstand 3px, zusätzlich zum Lichtlauf", "deaktiviert": "aria-disabled=\"true\" statt disabled (bleibt fokussierbar), Fläche #e4e7ee, Ring #cdd2dc, Text #464c59, kein Lauf; Grund und Ausweg (Warteliste) im role=status", "laden": "data-laedt: Text „Wird reserviert …“, Spinner 16 px 800 ms linear statt Pfeil, Licht läuft weiter, Ergebnis nach 1800 ms im role=status", "touch": "pointerdown ohne Maus startet eine Runde (3000 ms)", "reduziert": "kein Lauf; Hover/Fokus/Laden: stehender Ring linear-gradient(180deg, #ffffff 0%, #f7c325 20%, #7491ff 48%, #2b2f3d 100%), Glow linear .45", "kontrastmodus": "border 2px ButtonText, deaktiviert GrayText, Glow aus", "farben": "#f4f6fa Grund, #ffffff Karte, #141414 Text und Button, #555b69 Meta, #7491ff Markenton (Licht), #f7c325 Badge und Licht, #10bf7a nur Häkchen", "schrift": "Bricolage Grotesque 700 opsz 96, h1 clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem), -0.02em, Zeilenhöhe 1.05; Onest Text 1.0625rem/1.6, Button Onest 600 1rem" } } ] } }