I build motion components for studio & agency sites — scroll sections that feel intentional, not template filler. Built brutally well.
Kinetic Grid — N vertical lines, each a pluckable string.
Pointer bends the nearest column with optional neighbor bleed. Column count, gap, inset, entrance stagger — all from the panel. Same physics family as Kinetic Line, scaled to full grid layouts.
Canvas = static lines. Preview/publish = physics.
Try it: https://framer.link/UlKKQnq
BuiltByKern → Kinetic Grid
Backdrop or divider — which slot fits your layout?
CircleCards — circular 3D card ring with pointer physics.
Cards sit on a polar ring. Cursor drives flip + stage tilt. Auto-roll on publish, pauses on hover, showcase on click for portfolio focus. 6–48 cards, image/video slots, grain + vignette built in.
Preview on published URL — auto-roll doesn't run on canvas.
BuiltByKern → CircleCards
Ring layout for portfolio or product grid — which fits your projects?
Most section dividers in Framer are static strokes. Hover might fade or shift them — but nothing reacts to where on the line you touched or how hard you pulled.
Kinetic Line runs a lightweight string simulation in real time. Move along a horizontal divider or vertical accent line and the stroke bends, propagates, and settles with spring physics — not a CSS wiggle.
Built for real layout slots:
→ hero separators
→ editorial section breaks
→ vertical accent lines
→ horizontal dividers between content blocks
Tuned from the panel without touching code:
→ Bend Amount + Pluck Intensity
→ Pointer Reach (wider hit area, same deformation cap)
→ Tension / Damping / Spread
→ horizontal or vertical orientation
Defaults are subtle — editorial out of the box. Single self-contained component, no helper imports.
Where would you drop a physics divider — hero, between sections, or as a vertical rail?
On vacation. Sales still rolling in. That's the dream. @Framer
LetterRollMenu — editorial vertical nav with per-letter motion
---
Short-nav for studio and portfolio layouts — not another static link list.
On row hover, every glyph runs its own spring choreography. Three animation modes:
→ Roll — classic vertical dual-layer swap
→ Wave — alternating phase per letter
→ Flip — per-character 3D rotateX with a second face in your hover color
Five motion presets in one click: Editorial · Premium · Snap · Kinetic · Instant.
Also in the box:
→ Focus rail slides to the active row (spring + optional glow)
→ Dim Others on inactive rows
→ Entrance stagger when the block enters viewport
→ Responsive type scale (desktop / tablet / mobile)
→ Framer + Framer Motion only — no external deps
Try it:
https://possible-objects-130304.framer.app/
WDUT — Roll, Wave, or Flip for a creative studio site?
Marketplace link:
Questions welcome — preset tuning and row count (3–5 labels works best).
— BuiltByKern · built brutally well
400 on framer community!
thank you for following along while I ship components, templates, and client work on framer.
framer 3.0 and cursor — how i use it across components, templates, and client work
i ship three lanes on framer: marketplace code components, templates, and client sites. 3.0 didn't replace any of them — it finally separated two jobs that used to blur together.
native framer agents stay on the canvas. layout, sections, copy, styles, cms from inside the editor, with visual feedback while it edits. that's still where client design passes and template structure live for me.
external agents — cursor, claude code, codex — connect to the project through framer's agent bridge. cms population, redirects, page updates, migrations from messy files into collections. less export/import, more project-level work from the editor i already use for react and component logic.
my split:
• client sites — canvas for design iterations, cursor for repeatable content edits, seo metadata batches, and redirects across many pages
• templates — scaffold pages and collections faster, then refine breakpoints and components in framer
• code components — react, property controls, scroll math, and motion in cursor; polish and ship in framer's property panel
branching is what makes client work feel safe. external agents batch edits — they don't stream like the in-app agent. i experiment on a branch, review, merge to main. live stays untouched until i publish.
honest limit: external agents are strong for structured project work, not a replacement for designing on the canvas. i still keep both open — framer for visual work, cursor for project depth and code.
setup is one bridge npx @framer/agent setup), then connect your project from cursor.
if you want to try cursor with framer 3.0, my referral's 50% off the first month:
Shipped a portfolio section that behaves like a physical ribbon—not another horizontal stack with hover scale.
Kern Curvy Showcase keeps scroll inside the stage. Projects sit on a concave bowl arc (center rises, edges soften). Wheel anywhere; drag, grab, click, and hover cursor only on cards—empty stage stays inert.
What's in the box:
→ Bowl motion — Intensity + Focus Depth (0 = flat row)
→ Idle snap magnet — centers the active project after scroll
→ Fullscreen expand — spring open, masked char title, tags, year, description
→ Difference UI — readable copy over any photo (toggle off for solid type)
→ Custom cursor — project name on card hover; Close chip when expanded
→ Expand fit — cover / contain / stretch
→ Canvas-safe + reduced-motion scroll-snap fallback
→ Framer + Framer Motion only — zero external deps
first sale on corner scroller
thank you to whoever picked it up — first sale on a new component always hits different.
corner scroller is a scroll-pinned project showcase for studio and agency portfolios: each project holds at full hero size, then hands off with a corner morph (or slide left) while the next image grows in from the bottom-right preview. frosted caption overlay, optional glass cursor, reduced-motion fallback.
if you try it on a portfolio site, i'd love to see how you set up the handoffs.
Another one!
And it’s the fifth since the new marketplace launched, so I can’t complain too much, even if the sales aren’t huge. For me, it’s working, so what do you all think? Do you agree?
Wow! I was just browsing the Hype section and stumbled upon something incredible! It’s the very component I published a few hours ago! I’m overjoyed to see that it’s working perfectly!
I’ve finally shipped something I’ve been dreaming of in the Marketplace: a scroll-pinned project showcase that truly feels like a studio index—not just another fade slideshow.
The Kern Corner Project Scroller pins a stage as you scroll. Each project displays full-bleed, then transitions spatially: the current image fades out while the next image grows in from the bottom-right preview. The incoming layer remains on top. There are two modes available: corner morph and slide left.
Just a heads-up, I’m offering a 50% discount on all my components using CODE: FRAMER
Shipped something I've wanted in the Marketplace for a while: a scroll-pinned project showcase that actually feels like a studio index—not another fade slideshow.
Kern Corner Project Scroller pins a stage while you scroll. Each project holds full-bleed, then hands off spatially: the current image exits while the next grows in from the bottom-right preview. Incoming layer stays on top. Two modes: corner morph and slide left.
What else is in the box:
→ Frosted caption overlay (title · year · category) with responsive type → Hold time + scroll distance per project (vh) → Optional Tilt / Fold entrance on the incoming image only → Glass custom cursor with a px size slider (32–120) and editable label → Canvas-safe preview + reduced-motion list fallback → Framer + Framer Motion only — no external deps
hit 300 on framer community today. thank you guys! means a lot for a builder who mostly lives in property controls and motion.
I think we need a "pin post" option for our profile. @Framer
Wow, I’ve already gone past my X number of followers in the Framer Community in just two days! It’s amazing how strong and active this community is!
Just a heads-up: you can use code: FRAMER on any of my components to get a 50% discount!
Thanks everyone!
shipped quote intake on framer marketplace — a structured project intake block for quote requests before the client call, not another generic contact form. free to copy:
https://www.framer.com/community/marketplace/components/quote-intake/
@framer 3.0 is here
Agents on the canvas, branching off live, community and marketplace in one hub.
Celebrating with 50% off every component in my store this week: code FRAMER at checkout.
If you've been liking posts or following along, thank you — means a lot.
Hey guys! How is your experience with the Framer Community so far? New twitter?
Want to take a look to one of my favourite components? Any opinion is welcome!
https://www.framer.com/community/marketplace/components/letterrollmenu/
