DIE IDEE
Aus einer Rundung wurde ein kleines Tool.
Bei der Gestaltung einer Webseite wollte ich, dass sich die weiße Content-Fläche weich in den darüberliegenden Hero schiebt. Nicht mit einer gewöhnlichen abgerundeten Ecke, sondern mit zwei eleganten S-Kurven.
Die ersten Versuche funktionierten nur bei einer bestimmten Bildschirmbreite. Bei schmalen Viewports sahen die Rundungen plötzlich spitz aus. Auf Ultrawide-Monitoren lagen sie weit entfernt vom Text und den eigentlichen Inhalten.
Die entscheidende Idee war einfach: Warum richten wir die Kurven nach dem Viewport aus, wenn doch der Inhalt ihr Bezugspunkt sein soll?
PROBLEM → LÖSUNG → ERGEBNIS
Curve Studio auf einen Blick.
Aus einer optisch schönen Idee wurde ein praktisches Werkzeug: S-Kurven, die ihre Form behalten, auch wenn sich das Browserfenster verändert. Die Grafik zeigt den Weg vom Problem zum direkt nutzbaren Code.
Viewport-gebundene Kurven verzerren beim Resize oder entfernen sich vom Inhaltsbereich.
Die beiden SVG-Kurven bleiben in festem Abstand zu einem zentrierten Content-Container.
Du stellst Maße und Abstände live ein und kopierst anschließend HTML und CSS separat.
SO FUNKTIONIERT ES
Feste Geometrie. Flexibler Content.
Zwei gespiegelte SVG-Pfade mit kubischen Bézier-Kurven formen den Übergang. Die Kurven sind an der Content-Spur verankert. Der zusätzliche Platz wird außen aufgefüllt.
Große Monitore
Der äußere Freiraum wächst. Die Kurven bleiben nahe beim Content, statt an den Bildschirmrand zu rutschen.
Normale Viewports
Die Form bleibt identisch: kein horizontales Strecken, keine wechselnden Bézier-Radien.
Schmale Displays
Kurven laufen bei Platzmangel außerhalb der sichtbaren Fläche aus. Das Content-Layout kann separat umbrechen.
Contentgebunden
Ein einstellbarer Abstand hält die Kurven am Inhaltsbereich – auch auf besonders breiten Monitoren.
Form bleibt erhalten
Breite, Höhe und Rundung der einzelnen Kurven werden nicht durch die Fensterbreite verzerrt.
Sauberes Auslaufen
Bei wenig Platz laufen die Kurven seitlich aus dem Bild. Sie werden abgeschnitten, statt zusammengedrückt.
Wiederverwendbarer Export
HTML und CSS werden anhand deiner Einstellungen erzeugt. Das exportierte Layout braucht kein JavaScript.
ANWENDUNGSBEISPIELE
Wofür lässt sich Curve Studio einsetzen?
Nicht nur für eine bestimmte Website: Die S-Kurven eignen sich überall, wo ein Hero-Bereich optisch mit dem anschließenden Inhalt verbunden werden soll. Die Kurven sind frei anpassbar und können in bestehende Layouts integriert werden.
Landingpages
Ein klarer Einstieg mit einem weich anschließenden Content-Bereich.
Projektseiten
Visuelle Elemente und Fließtext wirken wie ein zusammenhängendes Layout.
Produkt- & SaaS-Seiten
Ruhige, zeitgemäße Übergänge für Feature- und Produktansichten.
Individuelle Webprojekte
Der erzeugte Code lässt sich in eigene Templates und CMS-Komponenten übertragen.
SELBST AUSPROBIEREN
In drei Schritten zur eigenen S-Kurve.
Du kannst den Editor direkt im Browser nutzen. Ohne Anmeldung, ohne Installation und ohne externe UI-Bibliothek.
Layout einstellen
Lege Gesamtbreite, Hero-Höhe und die Breite und vertikale Position des Contents fest.
Kurven gestalten
Ändere Kurvenhöhe, Breite, Rundungsradius und den Abstand zum Inhalt live.
Code kopieren
Öffne den seitlichen Code-Dialog und kopiere HTML und CSS getrennt in dein Projekt.
DER LIVE-EDITOR
Dein Layout. Deine Kurven.
Gestalte deine Übergänge live, teste die Vorschau und kopiere HTML und CSS direkt in dein Projekt.
EINSATZGEBIET
Für Entwickler, Designer und Neugierige.
Der Curve Designer eignet sich für Landingpages, Produktansichten und Webseiten mit organischen Abschnittsübergängen – überall dort, wo ein statisches border-radius nicht ausreicht.
Der Export liefert bewusst ein unabhängiges Layoutbeispiel. Beim Einbau in eine bestehende Webseite sollten die Elemente an das eigene Designsystem und die Breakpoints angepasst und getestet werden.