Kern Curvy Showcase turns a project list into a kinetic studio ribbon. Scroll inside the stage—cards sit on a concave bowl arc (taller center, softer edges), snap to center, and expand into a fullscreen case-study view with editorial typography.
Ribbon & scroll Self-contained stage—no page pin. Wheel anywhere on the stage; drag and grab only on project cards (same hit area as hover cursor and click-to-expand). Idle snap magnet pulls to the nearest card after you stop scrolling. Tune speed, magnet delay, and settle ease.
Bowl motion Intensity controls arc height and scroll kinetic depth. Focus Depth scales the bowl peak, side fade, and 3D tilt. Set either to zero for a flat horizontal row.
Expand Click a card or let the ribbon settle after scroll to expand. Spring choreography opens the active image while neighbors fade. Title reveals character-by-character; subtitle, description, tags, and year enter on stagger. Scroll or tap to collapse via the Close cursor chip.
Typography & UI Optional mix-blend-mode: difference keeps white type readable over photography—toggle off for solid copy on any background. Three font slots (title, meta, body) plus title size caps for tablet and mobile.
Custom cursor Optional project cursor: dot + project name only when hovering a card; Close label when expanded. Offset slider in Interaction.
Appearance Warm paper default, stage grain, edge vignette, and 3D perspective distance for bowl wave and expand.
Production guardrails Static canvas preview, prefers-reduced-motion horizontal scroll-snap fallback, in-view motion gate, semantic region label, transform-first animation, zero external dependencies.
Bind a CMS collection to Projects, map image and text fields, tune Motion and Appearance, preview in published mode. Built brutally well by KERN.
Framer, Component, Portfolio, Scroll, Carousel, Ribbon, Cinematic, Typography, Motion, Gallery, Showcase, Responsive, Accessible, Code Component, Studio, Agency, Bowl, Expand
Kern Curvy Showcase turns a project list into a kinetic studio ribbon. Scroll inside the stage—cards sit on a concave bowl arc (taller center, softer edges), snap to center, and expand into a fullscreen case-study view with editorial typography.
Ribbon & scroll Self-contained stage—no page pin. Wheel anywhere on the stage; drag and grab only on project cards (same hit area as hover cursor and click-to-expand). Idle snap magnet pulls to the nearest card after you stop scrolling. Tune speed, magnet delay, and settle ease.
Bowl motion Intensity controls arc height and scroll kinetic depth. Focus Depth scales the bowl peak, side fade, and 3D tilt. Set either to zero for a flat horizontal row.
Expand Click a card or let the ribbon settle after scroll to expand. Spring choreography opens the active image while neighbors fade. Title reveals character-by-character; subtitle, description, tags, and year enter on stagger. Scroll or tap to collapse via the Close cursor chip.
Typography & UI Optional mix-blend-mode: difference keeps white type readable over photography—toggle off for solid copy on any background. Three font slots (title, meta, body) plus title size caps for tablet and mobile.
Custom cursor Optional project cursor: dot + project name only when hovering a card; Close label when expanded. Offset slider in Interaction.
Appearance Warm paper default, stage grain, edge vignette, and 3D perspective distance for bowl wave and expand.
Production guardrails Static canvas preview, prefers-reduced-motion horizontal scroll-snap fallback, in-view motion gate, semantic region label, transform-first animation, zero external dependencies.
Bind a CMS collection to Projects, map image and text fields, tune Motion and Appearance, preview in published mode. Built brutally well by KERN.
Framer, Component, Portfolio, Scroll, Carousel, Ribbon, Cinematic, Typography, Motion, Gallery, Showcase, Responsive, Accessible, Code Component, Studio, Agency, Bowl, Expand
