Kern Corner Project Scroller is a scroll-driven project index for agency and studio sites. Scroll pins a stage; each project gets a hold at full hero size, then a handoff where the current image exits while the next grows in from the bottom-right preview—with the incoming layer on top. No opacity crossfade.
Handoffs
Corner morph — hero shrinks to the thumb while the next image grows from the preview corner.
Slide left — current exits left; next enters from the corner.
Caption overlay — title, year, and category on a frosted scrim over the stage. Responsive type scale, per-slot visibility, accent color, and optional per-project overrides.
Motion — Calm / Standard / Snappy scrub feel, caption crossfade speed, and optional Tilt or Fold 3D entrance on the incoming image only.
Interaction — optional glass custom cursor (Off / Minimal / Full), cursor size slider (32–120 px), editable label, and keyboard focus ring on project links.
Production guardrails — static canvas preview, prefers-reduced-motion linked list fallback, semantic region label, transform-only animation, zero external dependencies.
Drop it on a tall section, add projects in the property panel, tune hold time and handoff style, preview in published mode (scroll effects are not fully represented on canvas).
Built brutally well by KERN.
Tags (Marketplace)
Framer, Component, Scroll, Portfolio, Project Showcase, Corner Animation, Scroll Scrub, Agency, Studio, Motion, Cursor, Responsive, Accessible, Code Component
Kern Corner Project Scroller is a scroll-driven project index for agency and studio sites. Scroll pins a stage; each project gets a hold at full hero size, then a handoff where the current image exits while the next grows in from the bottom-right preview—with the incoming layer on top. No opacity crossfade.
Handoffs
Corner morph — hero shrinks to the thumb while the next image grows from the preview corner.
Slide left — current exits left; next enters from the corner.
Caption overlay — title, year, and category on a frosted scrim over the stage. Responsive type scale, per-slot visibility, accent color, and optional per-project overrides.
Motion — Calm / Standard / Snappy scrub feel, caption crossfade speed, and optional Tilt or Fold 3D entrance on the incoming image only.
Interaction — optional glass custom cursor (Off / Minimal / Full), cursor size slider (32–120 px), editable label, and keyboard focus ring on project links.
Production guardrails — static canvas preview, prefers-reduced-motion linked list fallback, semantic region label, transform-only animation, zero external dependencies.
Drop it on a tall section, add projects in the property panel, tune hold time and handoff style, preview in published mode (scroll effects are not fully represented on canvas).
Built brutally well by KERN.
Tags (Marketplace)
Framer, Component, Scroll, Portfolio, Project Showcase, Corner Animation, Scroll Scrub, Agency, Studio, Motion, Cursor, Responsive, Accessible, Code Component
BuiltByKern
