Kochschule
Kurse, Events und Genussmomente — K wie Kochkunst ist der Ursprung der Gruppe.
Internes Playground
BnK Labs
40 Experimente — Animationen, Effekte und Interaktionen für kommende Projekte. Scrollen und ausprobieren.
01
Liquid Ripple
Der Hintergrund verhält sich wie eine Wasseroberfläche: Jede Mausbewegung erzeugt Wellen, die sich physikalisch korrekt ausbreiten und die Fläche verzerren — inklusive Farbsäumen an den Wellenkanten.
Maus über die Fläche bewegen
02
Flowing Gradient
Ein organisch fließender Farbverlauf aus geschichtetem Simplex-Noise — vollständig im Fragment-Shader gerechnet. Die Maus lenkt die Lichtquelle. Der Stripe-Look, aber dunkel und markenneutral.
03
Partikel-Typografie
Der Schriftzug besteht aus tausenden Einzelpartikeln. Der Cursor stößt sie auseinander, Federkräfte ziehen sie zurück an ihren Platz — Typografie, die auf Berührung reagiert.
Durch den Schriftzug fahren
04
Gravity Type
Variable Fonts als Interaktionsfläche: Jeder Buchstabe reagiert auf die Nähe des Cursors und wird schwerer, je näher die Maus kommt — eine Gewichts-Welle läuft durch den Text.
UNTERNEHMENSGRUPPE
AUS PADERBORN
GASTRONOMIE · DIGITAL · EVENTS
05
Text-Decode
Begriffe entschlüsseln sich Zeichen für Zeichen aus zufälligem Zeichensalat — Terminal-Ästhetik für Zahlen, Claims oder Rotationen von Leistungen.
BnK ist
06
Text-Reveal-Suite
Drei Entrance-Varianten für Headlines und Fließtext im Vergleich: Zeilen schieben sich aus Masken, Wörter fokussieren sich aus Unschärfe, Absätze färben sich beim Scrollen ein.
A — Line Mask
Wir bauen Marken,
Räume und digitale
Erlebnisse.
Räume und digitale
Erlebnisse.
B — Blur Focus
Jedes Wort findet seinen Fokus, eines nach dem anderen.
C — Scroll Fill
Dieser Absatz färbt sich mit dem Scrollfortschritt ein — Wort für Wort wandert die Helligkeit durch den Text, bis alles lesbar ist. Ein ruhiger Effekt für Manifest-Seiten und lange Statements.
07
Warp Tunnel
Scroll-Scrubbing: Die Scrollposition steuert eine Kamerafahrt durch einen Punkte-Tunnel. Vor- und zurückscrollen bewegt die Kamera — die Seite wird zur Timeline.
08
Pure-CSS Scrollytelling
Null JavaScript: Native CSS Scroll-Driven Animations schrumpfen das Vollbild zum Karten-Layout und blenden die Caption phasenweise ein — alles läuft auf dem Compositor.
animation-timeline: view()
Ihr Browser unterstützt keine CSS Scroll-Driven Animations — die Sektion zeigt sich statisch.
09
Horizontal Drift
Vertikales Scrollen wird zur horizontalen Reise: Die Sektion pinnt sich fest und schiebt eine Galerie samt Riesen-Typo seitwärts durch den Viewport.
Unsere
Projekte
Projekte
K wie KochkunstKochkunst Shop
7MATIC
Autohaus Gröpperund
mehr →
mehr →
10
Card Stack
Karten stapeln sich beim Scrollen übereinander: Die vorherige Karte schrumpft und dunkelt ab, während die nächste darüber gleitet — ein Deck als Storytelling-Format.
Online-Shop
Outdoorküchen, Grills und Zubehör — kuratiert im Kochkunst Shop.
Digitalagentur
Websites, Automatisierung und Sichtbarkeit für Kunden aus der Region.
Events & Personal
Servicecrews und Veranstaltungsbegleitung — vom Empfang bis zum Abbau.
11
Image Trail
Der Cursor hinterlässt eine Spur aus Projektbildern: Jede Bewegung lässt Screenshots aufpoppen, die kurz aufleuchten und wieder vergehen — eine Galerie als Geste.
Bewegen
12
Spotlight Reveal
Eine Taschenlampe aus CSS-Masken: Unter der dunklen Deckschicht liegt eine zweite Informationsebene, die nur im Lichtkegel des Cursors sichtbar wird.
13
Micro-Interactions
Das Interaktions-Besteck der Award-Seiten: magnetische Buttons, elastische Hover-Reaktionen, ein flüssiger Fill vom Eintrittspunkt und ein Blob-Cursor im Differenz-Modus.
14
Elastic Dot Grid
Ein Punktraster mit Federphysik: Der Cursor drückt die Punkte auseinander, Federkräfte schwingen sie zurück — der Hintergrund fühlt sich plötzlich weich an.
15
Flow Field
Hunderte Partikel folgen einem unsichtbaren Noise-Strömungsfeld und zeichnen fließende Linien — generative Kunst, die nie zweimal gleich aussieht. Die Maus verwirbelt die Strömung.
16
ASCII Metaballs
Flüssige Blobs, gerendert als Zeichenraster: Ein Metaball-Feld wird pro Zelle in ASCII-Dichtezeichen übersetzt — Retro-Terminal trifft Lava-Lampe. Die Maus ist selbst ein Blob.
17
Aurora & Grain
Reines CSS: Weiche Farbnebel driften wie Polarlichter über die Fläche, ein feines Filmkorn aus SVG-Turbulenz legt analoge Textur darüber. Null JavaScript, null Bilder.
Ambient Layer
Stimmung ohne ein einziges Asset
18
Bento Expansion
Ein Bento-Grid, dessen Spalten echte Breite tauschen: Die Zelle unter dem Cursor wächst über animierte Grid-Tracks, ein Lichtreflex wandert über die Kartenränder.
19
Circle Reveal
Ein Klick invertiert die Welt: Vom Klickpunkt aus expandiert ein Kreis und legt die helle Version derselben Szene frei — der View-Transition-Look, hier mit purem clip-path.
Dark
Klicken Sie irgendwo hin.
Der Wechsel startet exakt am Klickpunkt.
20
Infinite Canvas
Eine frei ziehbare Projektlandschaft ohne Ränder: Karten wiederholen sich endlos in alle Richtungen, mit Trägheit beim Loslassen — Exploration statt Scrollen.
Ziehen & loslassen
21
Raymarched Metaballs
Eine echte 3D-Szene ohne jede Library: Der Fragment-Shader marschiert Strahlen durch ein Distanzfeld aus verschmelzenden Kugeln — flüssiges Metall, live gerechnet.
22
Plasma Warp
Domain-Warping: Noise verzerrt die Koordinaten von Noise — das Ergebnis sind ölige, ineinanderfließende Schlieren wie auf einer Wasseroberfläche mit Benzinfilm.
23
Hover Distortion
Der Award-Site-Klassiker: Beim Hover blendet ein Displacement-Shader zwischen zwei Projektbildern über — die Pixel fließen von einem Motiv ins andere statt hart zu schneiden.
KwK ↔ Shop
7MATIC ↔ Gröpper
Über die Kacheln hovern
24
Liquid Type
Der Schriftzug ist eine WebGL-Textur, die der Cursor wie Farbe auf Wasser verwischt — eine Flowmap speichert die Bewegung und lässt sie langsam verebben.
Durch den Text wischen
25
Halftone Lens
Ein Foto wird live in ein Punktraster übersetzt: Punktgröße folgt der Bildhelligkeit, und um den Cursor wächst das Raster wie unter einer Lupe.
26
Digital Rain
Fallende Zeichenkolonnen mit Leuchtspur — die Matrix-Referenz, hier mit BnK-Zeichenvorrat und Maus-Interaktion: Der Cursor reißt Lücken in den Regen.
27
Wave Grid
Ein Linienmeer aus überlagerten Sinuswellen, perspektivisch in die Tiefe gezeichnet — der Cursor drückt Wellenberge in die Fläche.
28
Glitch Type
RGB-Kanäle reißen auseinander, Slices verschieben sich für Sekundenbruchteile: kontrollierter Bildfehler als Stilmittel — beim Hover und in zufälligen Intervallen.
UNTERNEHMENSGRUPPE
PADERBORN
29
Text on Path
Eine Textzeile fließt entlang einer geschwungenen SVG-Kurve — die Scrollposition schiebt sie den Pfad entlang, wie ein Fluss aus Worten.
30
Story Line
Eine SVG-Linie zeichnet sich mit dem Scrollen selbst und verbindet Meilensteine — der Pfad ist die Timeline, sein Fortschritt Ihr Scrollbalken.
- 2021
K wie Kochkunst eröffnet — der Ursprung der Gruppe.
- Shop
Der Kochkunst Shop bringt das Sortiment online.
- Digital
Aus internen Tools wird die Digitalagentur.
- Events
Eventservice & Personal — Veranstaltungen vor Ort.
31
Type Cylinder
Wörter auf einem unsichtbaren 3D-Zylinder, der sich mit dem Scroll dreht — reine CSS-Transforms mit Perspektive, kein WebGL.
32
Masked Cinema
Video läuft ausschließlich innerhalb der Buchstaben: Typografie als Kinoleinwand — die Wortmarke wird zum Fenster in die Küche.
33
Tile Reveal
Zwei Enthüllungs-Choreografien im Vergleich: Lamellen, die gestaffelt aufklappen, und ein Kachelraster, das das Bild Stück für Stück freigibt.
Blinds
Tiles
34
Morph Lightbox
Das Thumbnail morpht nahtlos in die Großansicht — per View Transitions API, mit FLIP-Animation als Fallback. Kein Springen, ein Element, zwei Zustände.
35
FLIP Filter
Filtern ohne Neuladen-Gefühl: Karten gleiten sichtbar auf ihre neuen Positionen, Verschwindendes schrumpft weg — First, Last, Invert, Play.
36
Fluid Accordion
Natives details-Element, aber butterweich: Höhe animiert von 0 auf auto — mit modernem interpolate-size, Grid-Rows-Trick als Fallback.
Warum eine eigene Eventlocation?
Weil Gastgeber sein unser Kern ist: Im eigenen Raum kontrollieren wir Ablauf, Qualität und Atmosphäre — vom ersten Getränk bis zum Abbau.
Was automatisiert BnK intern?
Buchhaltung, Zahlungsabgleich, Reporting, Monitoring und Content-Sync — Software arbeitet nachts, das Team tagsüber.
Übernehmt ihr auch externe Projekte?
Ja — Websites, Automatisierungen und Events für Kunden, mit denselben Werkzeugen, die wir selbst täglich nutzen.
37
Compare Slider
Vorher/Nachher mit weichem Nachlauf: Der Trenner folgt dem Cursor mit Trägheit statt starr zu kleben — hier als Blueprint-Ansicht gegen finales Design.
38
Snap Chapters
Scroll-Snap als Regie: Jedes Kapitel rastet bildschirmfüllend ein, Nummer und Titel inszenieren sich beim Eintreten neu — Präsentationsmodus im Browser.
Ankommen
Jedes Kapitel bekommt die volle Bühne.
Eintauchen
Scroll-Snap rastet präzise ein — kein Zwischenzustand.
Weitergehen
Titel und Ziffer animieren bei jedem Eintritt aufs Neue.
39
Ember Trail
Der Cursor sprüht Funken: additiv gezeichnete Partikel mit Schweif, Auftrieb und Verglühen — Lagerfeuer-Physik für Maus und Finger.
Bewegen für Funkenflug
40
Inversion Lens
Eine Linse aus purem CSS: backdrop-filter invertiert, was unter ihr liegt — Text wird im Vorbeigleiten zum Negativ, ganz ohne Canvas.