{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "kreistext-siegel-rotierend", "name": "Rotierendes Kreistext-Siegel (Badge, Stempel, Scroll-Hinweis)", "name_en": "Rotating circular text badge", "kurz": "Ein Stempel als Reservieren-Knopf: Der Text läuft einmal nahtlos um den Ring und dreht sich langsam, beim Hover hält er an, beim Scrollen folgt er Tempo und Richtung.", "kategorie": "Schrift-Animationen", "kategorie_slug": "schrift-animationen", "kategorie_nr": 6, "bau_chat": "C1", "prioritaet": "C", "trendstatus": "etabliert", "belegstatus": "quellenbelegt", "website_belege": 0, "stimmung": [ "verspielt", "warm", "experimentell" ], "stimmung_roh": [ "verspielt", "persönlich", "handgemacht", "retro" ], "technik": [ "svg", "css" ], "technik_gruppen": [ "css", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "1) Ein kurzer Text mit Trennpunkten läuft einmal ganz um einen Kreis und schließt nahtlos, etwa „Tisch reservieren • Seit 1874 •“. 2) In der Mitte sitzt ein Icon, ein Pfeil, ein Logo oder ein Foto. 3) Der Ring dreht sich langsam und endlos (10 bis 20 s pro Umdrehung) oder ist an den Scroll gekoppelt: Er dreht mit der Scrollgeschwindigkeit und wechselt mit der Scrollrichtung. 4) Umsetzung per SVG-textPath auf einem Kreispfad oder per CSS mit einzeln gedrehten Buchstaben (je 360° / n). 5) Häufig als Call-to-Action (Kontakt, Reservierung, Showreel) oder als Qualitätssiegel im Hero.", "warum_es_wirkt": "Die Stempel-Anmutung gibt Persönlichkeit und Handschrift. Die ruhige Drehung bringt Leben ins Layout, ohne abzulenken, und zieht den Blick auf den Call-to-Action.", "wann_einsetzen": "Als Scroll-Hinweis oder Kontakt-CTA auf Portfolio- und Studioseiten, als Siegel für Gastronomie und Manufakturen, als Badge auf Produktseiten („Neu • Neu •“), in Templates als austauschbarer Akzent.", "wann_nicht": "Als reine Deko ohne Funktion, denn das Muster ist in Framer- und Webflow-Templates sehr verbreitet und wirkt schnell generisch. Nicht mehrere rotierende Elemente auf einer Seite. Nicht für lange Texte, die werden auf dem Ring unlesbar. Nicht als Siegel mit Umwelt-, Bio- oder Sozialaussage („nachhaltig“, „regional“, „fair“): Eigensiegel ohne Zertifizierungssystem sind seit 27.09.2026 unzulässig (UWG Anhang Nr. 2a), vom Kunden prüfen lassen. Für echte Siegel die Variante „Siegel mit Nachweis“ in logo-wand-social-proof verwenden.", "varianten": [ "Endlos rotierendes SVG-Badge mit Icon in der Mitte", "Scroll-gekoppelte Rotation: Tempo und Richtung folgen dem Scroll", "Hover hält die Drehung an oder beschleunigt sie", "Radiales Marquee mit mehreren Ringen (Osmo „Radial Text Marquee“)", "Nur CSS mit gesplitteten Zeichen und rotate(calc(var(--i) * 360deg / var(--n)))", "Statisches Siegel ohne Rotation als Qualitätsmarke" ], "umsetzung": "SVG: . textLength = 2πr setzen, damit der Text exakt schließt; das letzte Leerzeichen als geschütztes Leerzeichen schreiben, sonst kürzt SVG es weg und die Naht klebt. Nur die Gruppe mit dem Text drehen, die Mitte bleibt stehen. Dauerrotation per CSS: .ring { animation: spin 16s linear infinite } @keyframes spin { to { rotate: 1turn } }. Für Tempowechsel (Hover, Scroll) besser per requestAnimationFrame einen Winkel aufaddieren und das Tempo weich dem Ziel annähern lassen, dann springt nichts. Scroll-Kopplung: Geschwindigkeit in px/s messen und auf ein Tempo abbilden, zum Beispiel 1 + |v| / 150, höchstens 10-fach; mit GSAP geht das über ScrollTrigger und getVelocity(), ohne Bibliothek über animation-timeline: scroll(). Funktion als aria-label am umgebenden Link.", "mobil": "Kleiner setzen (etwa 110 bis 120 px) und so platzieren, dass es keinen Text überlagert. Hover gibt es nicht, die Dauerrotation läuft weiter. Die Scroll-Kopplung funktioniert auch mobil.", "reduzierte_bewegung": "Rotation anhalten und das Siegel statisch zeigen, mit dem Anfang des Textes gut lesbar oben.", "barrierefreiheit": "SVG-Text wird von Screenreadern stückweise oder doppelt gelesen. Deshalb das SVG mit aria-hidden ausblenden und die Funktion als aria-label am umgebenden Link oder Button nennen. Fokus wie Hover behandeln (anhalten). Dauerbewegung über 5 s muss pausierbar sein (WCAG 2.2.2), prefers-reduced-motion beachten." }, "messwerte": { "easing": "linear (Dauerrotation)", "dauer_ms": "10000–20000 pro Umdrehung", "stagger_ms": "", "distanz": "Durchmesser 96–160 px; Schrift 10–14 px in Versalien mit 0.1–0.2em Laufweite", "sonstiges": "textLength ≈ 2πr, damit der Text nahtlos schließt", "herkunft": "typisch", "quelle": "" }, "kurve": { "bezier": [ 0, 0, 1, 1 ], "css": "cubic-bezier(0, 0, 1, 1)", "name": "linear", "dauer_ms": null }, "gesehen_bei": [ { "seite": "Osmo – Radial Text Marquee", "url": "https://www.osmo.supply/resource/radial-text-marquee", "auszeichnung": "", "beobachtung": "Fertige Ressource für radial umlaufenden Text (mehrere Ringe, Laufband-Logik).", "art": "demo" }, { "seite": "Olivier Larose – Text Along Path", "url": "https://blog.olivierlarose.com/tutorials/text-along-path", "auszeichnung": "", "beobachtung": "Tutorial zu textPath mit scroll-gekoppeltem startOffset; Grundlage auch für Kreis-Badges.", "art": "artikel" } ], "tutorials": [ { "titel": "Olivier Larose – Text Along Path", "url": "https://blog.olivierlarose.com/tutorials/text-along-path" }, { "titel": "MDN – ", "url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath" } ], "kombinierbar_mit": [ "text-on-path", "kinetische-typo-intro", "magnetische-elemente", "footer-cta-riesen-wortmarke", "scroll-fortschritt" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/schrift-animationen/kreistext-siegel-rotierend/", "meta": "https://cecodesign.de/lab/fundus/schrift-animationen/kreistext-siegel-rotierend/meta.json", "demo": "https://cecodesign.de/lab/fundus/schrift-animationen/kreistext-siegel-rotierend/demo" }, "herkunft": { "quelldateien": [ "patch-luecken-b.json" ] }, "bau": { "status": "fertig", "kurz": "Ein Stempel als Reservieren-Knopf: Der Text läuft einmal nahtlos um den Ring und dreht sich langsam, beim Hover hält er an, beim Scrollen folgt er Tempo und Richtung.", "demo": true, "abhaengigkeiten": [], "werte": { "easing": "linear (Dauerrotation per requestAnimationFrame, Winkel += Tempo · dt · 360° / 16000 ms)", "dauer_ms": 16000, "durchmesser_px": "160 (Desktop), 116 (bis 860 px Breite)", "ring": "SVG viewBox 200 × 200, Textpfad r = 74, textLength = 2πr ≈ 465, lengthAdjust spacing; Fläche r = 98 #EAC16E, Kontur r = 94 und r = 56 je 1,2 #293E3A, Mitte r = 48 #293E3A mit Pfeil", "schrift": "Fraunces 600 versal, 15 im viewBox 200 (≈ 12 px bei 160 px), SOFT 100, opsz 12; Text „Tisch reservieren • Seit 1874 im Sand •“ plus geschütztes Leerzeichen an der Naht", "tempo_glaettung": "Tempo nähert sich dem Ziel pro Bild um 8 % an (bei 60 fps, auf die echte Bildrate umgerechnet)", "variante_endlos": "Hover oder Fokus: Zieltempo 0 (Ring hält zum Lesen an)", "variante_scroll": "Zieltempo = Richtung · min(10, 1 + |v| / 150), v = Scrollgeschwindigkeit in px/s; Richtung folgt der letzten Scrollrichtung; ruht der Scroll 120 ms, klingt v pro Bild um 15 % ab", "variante_hover_x3": "Hover oder Fokus: Zieltempo 3", "hover_knopf": "scale 1 → 1.04 und Pfeil 3 px nach rechts oben, 200 ms cubic-bezier(0.16, 1, 0.3, 1)", "bild_einblendung": "Bildtafel opacity 0 → 1 und scale 0.96 → 1, 700 ms cubic-bezier(0.16, 1, 0.3, 1)", "farben": "Papier #F0ECE0, Text #353839, Dunkelgrün #293E3A, Senf #EAC16E, Trennpunkte #8c4a22", "vorfuehrung": "Endlos mit Zeiger 5,2 s, Scroll mit simulierter Geschwindigkeit bis 1300 px/s abwärts und 1100 px/s aufwärts 6 s, Hover × 3 5,2 s" }, "ausloeser": "dauer", "touch": "Kein Hover: Der Ring dreht in allen Varianten im Grundtempo, die Hover-Varianten wirken dort wie die Dauerrotation. Die Scroll-Kopplung funktioniert auch mit dem Finger. Das Siegel sitzt auf dem Telefon kleiner (116 px) an der oberen rechten Ecke des Bildes und verdeckt keinen Text. Ein Tippen löst den Link aus.", "reduziert": "Das Siegel steht still, der Text beginnt links und liest sich oben über den Bogen. Die Bildtafel erscheint ohne Einblendung, die Vorführung entfällt.", "korrekturen": { "beschreibung": "1) Ein kurzer Text mit Trennpunkten läuft einmal ganz um einen Kreis und schließt nahtlos, etwa „Tisch reservieren • Seit 1874 •“. 2) In der Mitte sitzt ein Icon, ein Pfeil, ein Logo oder ein Foto. 3) Der Ring dreht sich langsam und endlos (10 bis 20 s pro Umdrehung) oder ist an den Scroll gekoppelt: Er dreht mit der Scrollgeschwindigkeit und wechselt mit der Scrollrichtung. 4) Umsetzung per SVG-textPath auf einem Kreispfad oder per CSS mit einzeln gedrehten Buchstaben (je 360° / n). 5) Häufig als Call-to-Action (Kontakt, Reservierung, Showreel) oder als Qualitätssiegel im Hero.", "warum_es_wirkt": "Die Stempel-Anmutung gibt Persönlichkeit und Handschrift. Die ruhige Drehung bringt Leben ins Layout, ohne abzulenken, und zieht den Blick auf den Call-to-Action.", "wann_einsetzen": "Als Scroll-Hinweis oder Kontakt-CTA auf Portfolio- und Studioseiten, als Siegel für Gastronomie und Manufakturen, als Badge auf Produktseiten („Neu • Neu •“), in Templates als austauschbarer Akzent.", "wann_nicht": "Als reine Deko ohne Funktion, denn das Muster ist in Framer- und Webflow-Templates sehr verbreitet und wirkt schnell generisch. Nicht mehrere rotierende Elemente auf einer Seite. Nicht für lange Texte, die werden auf dem Ring unlesbar. Nicht als Siegel mit Umwelt-, Bio- oder Sozialaussage („nachhaltig“, „regional“, „fair“): Eigensiegel ohne Zertifizierungssystem sind seit 27.09.2026 unzulässig (UWG Anhang Nr. 2a), vom Kunden prüfen lassen. Für echte Siegel die Variante „Siegel mit Nachweis“ in logo-wand-social-proof verwenden.", "varianten": [ "Endlos rotierendes SVG-Badge mit Icon in der Mitte", "Scroll-gekoppelte Rotation: Tempo und Richtung folgen dem Scroll", "Hover hält die Drehung an oder beschleunigt sie", "Radiales Marquee mit mehreren Ringen (Osmo „Radial Text Marquee“)", "Nur CSS mit gesplitteten Zeichen und rotate(calc(var(--i) * 360deg / var(--n)))", "Statisches Siegel ohne Rotation als Qualitätsmarke" ], "umsetzung": "SVG: . textLength = 2πr setzen, damit der Text exakt schließt; das letzte Leerzeichen als geschütztes Leerzeichen schreiben, sonst kürzt SVG es weg und die Naht klebt. Nur die Gruppe mit dem Text drehen, die Mitte bleibt stehen. Dauerrotation per CSS: .ring { animation: spin 16s linear infinite } @keyframes spin { to { rotate: 1turn } }. Für Tempowechsel (Hover, Scroll) besser per requestAnimationFrame einen Winkel aufaddieren und das Tempo weich dem Ziel annähern lassen, dann springt nichts. Scroll-Kopplung: Geschwindigkeit in px/s messen und auf ein Tempo abbilden, zum Beispiel 1 + |v| / 150, höchstens 10-fach; mit GSAP geht das über ScrollTrigger und getVelocity(), ohne Bibliothek über animation-timeline: scroll(). Funktion als aria-label am umgebenden Link.", "mobil": "Kleiner setzen (etwa 110 bis 120 px) und so platzieren, dass es keinen Text überlagert. Hover gibt es nicht, die Dauerrotation läuft weiter. Die Scroll-Kopplung funktioniert auch mobil.", "reduzierte_bewegung": "Rotation anhalten und das Siegel statisch zeigen, mit dem Anfang des Textes gut lesbar oben.", "barrierefreiheit": "SVG-Text wird von Screenreadern stückweise oder doppelt gelesen. Deshalb das SVG mit aria-hidden ausblenden und die Funktion als aria-label am umgebenden Link oder Button nennen. Fokus wie Hover behandeln (anhalten). Dauerbewegung über 5 s muss pausierbar sein (WCAG 2.2.2), prefers-reduced-motion beachten." }, "geprueft": "01.11.2026", "notiz": "Welt: Rauchfang, erfundene Hausbrauerei mit Wirtschaft in Bamberg (Rezept gastro-warm-appetitlich): Papier #F0ECE0, Fraunces und Commissioner, Dunkelgrün und Senf, Öffnungsstatus aus echten Zeiten berechnet. Das Siegel ist der Reservieren-Knopf und sitzt halb auf der eigenen SVG-Bildtafel (Seidla vor Dom und Regnitz). Umschalter Endlos (Hover hält an), Scroll-gekoppelt und Hover × 3; Tempo weich geglättet, aktuelles Tempo in der Werte-Leiste. Darunter Karte mit Tabellenziffern und Allergenkürzeln, damit der Scroll-Modus Strecke hat. Referenzen nur als Prinzip: fiveelephant.com (Stempel-Siegel auf Plakatbild), omnipollo.com (Stempel neben Serif-Wortmarke). AD-Review 01.11.2026: Note 5 Korrektur 03.11.2026: wann_nicht um Eigensiegel ergänzt (UWG Anhang Nr. 2a)." } }