61:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 62:T788,

What it includes

- Dense starting cluster with a shared, editable Cluster Size

- Ten original Y2K inline SVG icons: smiley, love signal, chrome star, butterfly, cyber pet, lucky star, flame, disk, alien, and spiral

- Three image slots per token: Default, Hover, and Click

- Waiting, Hover, and Active color controls

- Press-only retreat: the selected token remains central while the others fan outward

- Press the active token again to regroup the field

- Horizontal, center-aligned ON/OFF state label beneath the last interacted token (never rotates)

- Optional scene image, labels, retreat distance, and cluster size

- Background follows any Fixed Framer frame size; verified at tablet, mobile, and 320px widths

- Keyboard buttons with aria-pressed, Static Renderer fallback, and Reduced Motion support

## Best for

- Fashion, music, art, and culture launches

- Playful portfolio or agency landing pages

- Interactive campaign maps and visual indexes

- Product stories where one object needs to become the focal point

Why it feels different

Most token fields are either static piles or permanently scattered bubbles. Token Retreat Field treats the cluster as a social object: hover changes its skin, a press creates focus, and every other token physically makes room.

Usage

1. Add Token Retreat Field to a Framer page.

2. Open the Tokens array and add up to the number of tokens your layout needs.

3. Use the built-in Y2K SVG set or attach a Default Icon, Hover Icon, and Click Icon to any token for custom artwork.

4. Keep X/Y values close together for a dense pile. Increase Retreat Distance only when the preview needs more breathing room.

5. Preview hover, keyboard focus, press, regroup, and Reduced Motion before publishing.

63:T6a6,

What it includes

- Dense starting cluster with a shared, editable Cluster Size

- Three image slots per token: Default, Hover, and Click

- Waiting, Hover, and Active color controls

- Press-only retreat: the selected token remains central while the others fan outward

- Press the active token again to regroup the field

- Horizontal, center-aligned ON/OFF state label beneath the last interacted token (never rotates)

- Optional scene image, labels, retreat distance, and cluster size

- Keyboard buttons with aria-pressed, Static Renderer fallback, and Reduced Motion support

Best for

- Fashion, music, art, and culture launches

- Playful portfolio or agency landing pages

- Interactive campaign maps and visual indexes

- Product stories where one object needs to become the focal point

Why it feels different

Usage

1. Add Token Retreat Field to a Framer page.

2. Open the Tokens array and add up to the number of tokens your layout needs.

3. Attach a Default Icon, Hover Icon, and Click Icon to each token. If an image is omitted, a cute kitschy pixel glyph fallback is used.

4. Keep X/Y values close together for a dense pile. Increase Retreat Distance only when the preview needs more breathing room.

5. Preview hover, keyboard focus, press, regroup, and Reduced Motion before publishing.

64:T863,

I said I’d share more soon… so here it is.

Visual Motion Playground is live.

I built it for that awkward moment before creating a component in Framer — when you know the feeling you want, but not the exact combination of material, depth, timing, and motion values.

The free Lite version lets you explore presets, test interactions, compare different motion feels, and copy the CSS directly from your browser:

👉 https://attached-assets--bloglluukk.replit.app/

Honestly, I have no idea who will actually buy the Pro version.

I made it because I wanted it for my own workflow — not because I had a perfectly validated business plan.

I have a day job, so this doesn’t need to pretend to be a giant startup. It can just be a small, useful tool.

And I’d rather see someone use it than spend too much time optimizing every dollar.

So I made a small launch code for the Framer community:

Use code KNK260 to get Pro for $8 instead of $15.

Available until September 8, 2026 at 00:00 UTC.

👉 https://knokknok1997.lemonsqueezy.com/checkout/buy/238b53fc-de70-4046-b747-edb65a723b4e?checkout%5Bdiscount_code%5D=KNK260

Pro includes deeper Inspector controls, local image testing, the full preset library, CSS and Framer Motion export, JSON export, and a private offline HTML version.

It’s not a Framer plugin yet.

But if people genuinely want an “apply this to my selected layer” button, maybe that becomes the next version.

For now, I’m just curious to see where this little tool ends up. 🔥

65:T7ca,

I started learning Framer from an ebook… then wondered: “Why am I only getting likes?”

Hi! I’m a visual designer who loves motion, interaction, and anything that feels satisfying to look at. 👋

I recently started diving deeper into Framer after reading an ebook about it.

Interactive components, micro-interactions, playful sections… I was having so much fun that I started making things and putting them out there.

But then I noticed something interesting.

People were liking my work, but there wasn’t much clicking or buying.

And I kept wondering:

“Why do people like this… but not actually use it?”

That question made me think more seriously about what people come to the Framer marketplace and community for.

As a designer, I naturally want to make beautiful interactions and interesting motion.

But the person actually building a website may be thinking:

“Can this help me finish my project faster?”

That gap between what I enjoy creating and what someone wants to use right now became really interesting to me.

Then another thought came up:

What if I didn’t have to keep changing numbers and code just to find the right motion?

What if I could adjust motion more visually — almost like tweaking it by feel?

So… I started building exactly that.

And surprisingly, it’s already turning into something that actually works. 🔥

I’m currently experimenting with a tool that makes it easier to play with motion, timing, and visual feel without constantly jumping back and forth between values.

Still very much a work in progress, but I’m having a lot of fun building it.

I’ll share more soon. 🚀

66:T477,

Afterimage is an editorial photo exhibition wall for Framer, built for visual brands that want their images to feel curated instead of simply displayed.

It gives you a premium gallery section with a cinematic image stage, filmstrip navigation, project metadata, descriptive notes, subtle grain texture, archive-style mood, and polished static-safe behavior for Framer Canvas and export.

Use it to present photography portfolios, fashion campaigns, studio case studies, art direction work, lookbooks, editorial collections, product shoots, visual archives, or any image-led brand story that needs to feel more like an exhibition than a standard grid.

This component is recommended for photographers, creative studios, fashion labels, art directors, portfolio designers, boutique agencies, galleries, and premium brands that want a more atmospheric way to show selected work.

Instead of a basic image grid or carousel, Afterimage creates a focused viewing moment: one hero image, supporting context, and a filmstrip of related frames so visitors can move through the collection without losing the editorial mood.!!

67:T5fb,

AgentPulse is a premium Framer component for AI products that need to make invisible agent work feel visible, calm, and trustworthy.

Instead of using a generic chat bubble or decorative blob, AgentPulse gives your landing page a polished AI status moment: a dense particle orb, four editable agent states, clickable controls, current-state microcopy, signal metrics, text sheen, optional Glass mode, and a CTA with press-only physical motion.

It is built for AI SaaS landing pages, agent demos, assistant products, workflow automation tools, voice interfaces, and support AI previews.

The component is static-renderer safe for Framer Canvas and export. Orb motion, sheen, auto-cycle, and press transforms are disabled in static or reduced-motion contexts, so it stays editor-friendly and export-safe.

What's Included

- Animated AI orb built from a dense particle sphere

- Four editable states: Listening, Thinking, Searching, Working

- Clickable state controls

- Current-state caption and detail text

- Text sheen effect

- Three editable signal metrics

- Optional iOS-style Glass mode

- Hero and Compact layout modes

- Press-only CTA and state button motion

- Static renderer and Reduced Motion safeguards

Best For

- AI SaaS landing pages

- Agent and assistant product demos

- Workflow automation sites

- Chatbot and support AI sections

- Voice AI previews

- Premium AI hero/status moments

68:T7a6,

CaseLens turns a transformation image into a high-taste agency case-study section: before/after reveal, client context, project metadata, proof metrics, glass mode, and a press-only CTA in one editable Framer component. The default tone is deliberately premium: make the reveal feel expensive.

What it includes

- Before/after image reveal with draggable lens divider

- Static-renderer safe fallback for Canvas and export

- Keyboard-accessible reveal control

- Editable client, discipline, year, title, summary, CTA, and URL

- Three editable proof metrics

- Premium editorial default styling

- Optional iOS-style glass surface

- Press-only CTA motion with no hover wobble

- Reduced Motion support

- Token-friendly colors and radius controls

Best for

- Brand agency case studies

- Creative studio portfolios

- Redesign and rebrand pages

- Architecture and interior before/after reveals

- Retouching, photography, and production portfolios

- Premium landing pages that need one distinctive proof section

Why it feels premium

Most compare sliders feel like a utility widget. CaseLens behaves more like a creative director’s case-study spread: restrained typography, client metadata, proof metrics, a cinematic reveal, and no cheap hover wobble.

It is intentionally opinionated. The target buyer is the person who wants their work to feel expensive before the visitor reads a single line of copy.

Usage

1. Add CaseLens to a Framer page.

2. Add the component to the Workspace Library if it was pasted as a Code file.

3. Replace the before and after images.

4. Edit the client, discipline, year, headline, summary, and CTA.

5. Tune the starting reveal position.

6. Toggle Glass mode depending on the page background.

7. Preview desktop and mobile before publishing.

69:T654,

What it includes

- Monthly/yearly billing toggle

- Three editable plan cards

- Highlighted recommended plan

- CTA links per plan

- Responsive feature comparison table

- Mobile-friendly comparison rows

- Optional iOS-style glass effect

- Five press-only physical interaction presets with no hover wobble

- Static-renderer and Reduced Motion safe behavior

- Token-friendly colors and editable radius

Best for

- SaaS pricing pages

- AI tool landing pages

- Framer templates

- Productized service pages

- Startup waitlist and launch pages

Why it feels premium

Most pricing components stop at cards. PlanProof keeps the decision layer together: billing cycle, plan emphasis, CTA links, and feature comparison all stay visually aligned. It is built for the part of the page where buyers decide, not just where prices are displayed.

Usage

1. Add PlanProof to a Framer page.

2. Edit the three Plans in the Properties panel.

3. Edit Feature Rows to match your offer.

4. Set the default billing cycle and yearly savings badge.

5. Toggle Glass and Motion as needed.

6. Preview desktop and mobile before publishing.

Price

$19 one-time purchase.

License

Personal and single-business use. Redistribution or resale as a standalone component is not allowed.

Refund note

Because this is a digital code component, refunds are not available after access unless the component has a reproducible technical issue that cannot be fixed.

6a:T6d2,

What it includes

- Searchable FAQ items with match highlighting

- Auto-generated category filters

- Crawlable collapsed answers

- Optional FAQPage JSON-LD schema

- Direct hash links for specific questions

- Single-open or multi-open behavior

- Filled default SaaS/support example content

- Optional iOS-style glass effect

- Five press-only physical interaction presets with no hover wobble

- Static-renderer and Reduced Motion safe behavior

- Responsive layout and keyboard-visible focus states

Best for

- SaaS pricing and support pages

- Framer templates

- Product landing pages

- Help centers and resource hubs

- Agencies shipping client FAQ sections

Why it feels premium

Most FAQ sections stop at expand and collapse. AnswerVault handles the quiet production details that make a FAQ useful after launch: searchable answers, category filtering, crawlable collapsed content, optional structured data, direct links to individual questions, responsive layouts, token-friendly colors, and Framer Canvas safety.

Usage

1. Add AnswerVault to a Framer page.

2. Edit FAQ Items in the Properties panel.

3. Toggle Search, Categories, SEO Schema, Glass, and Motion as needed.

4. Preview the page and test search, categories, and question links.

Price

$12 one-time purchase.

License

Personal and single-business use. Redistribution or resale as a standalone component is not allowed.

Refund note

Because this is a digital code component, refunds are not available after access unless the component has a reproducible technical issue that cannot be fixed.

6b:T694,

What it includes

- Destination URL validation and automatic HTTPS normalization

- Existing query parameter and URL hash preservation

- UTM source, medium, campaign, term, and content fields

- Up to five customizable channel presets

- Live generated URL and active parameter summary

- Copy, open, and clear actions

- Optional iOS-style glass effect

- Five press-only physical CTA presets with no hover wobble

- Static-renderer and Reduced Motion safe behavior

- Responsive layout and keyboard-visible focus states

Best for

- Marketing and growth resource pages

- SaaS websites

- Creative and performance agencies

- Newsletter sites

- Free-tool and lead-magnet pages

Why it feels premium

CampaignLink handles the quiet edge cases that make a campaign tool trustworthy: invalid destinations, missing schemes, existing query strings, anchors, copy feedback, keyboard focus, responsive layout, and Framer Canvas safety. The owner configures it entirely from the Properties panel.

Usage

1. Add CampaignLink to a Framer page.

2. Set the starter destination and channel presets.

3. Customize labels, colors, Glass mode, and motion.

4. Preview the page and create a test campaign URL.

Price

$9 one-time purchase.

License

Personal and single-business use. Redistribution or resale as a standalone component is not allowed.

Refund note

Because this is a digital component, refunds are not available after access unless the component has a reproducible technical issue that cannot be fixed.

6c:T4c1,

What it includes

- Cmd/Ctrl+K shortcut

- Searchable command list

- Arrow-key navigation

- Enter to open the selected command

- Escape and outside-click close

- Anchor, internal, and external URL support

- Optional new-tab behavior per command

- iOS-style glass effect toggle

- Static-renderer safe behavior for Framer Canvas and export

Best for

- SaaS landing pages

- Documentation sites

- Product templates

- Resource hubs

- Portfolio sites with many sections

Why it feels premium

CommandPilot adds the kind of fast navigation users expect from polished software products, without asking the site owner to wire keyboard events, modal state, accessible list navigation, and link handling by hand.

Usage

1. Add CommandPilot to your Framer project.

2. Edit the Items control with your pages, anchors, or URLs.

3. Set your Shortcut and Design options.

4. Preview the page and test Cmd+K or Ctrl+K.

Price

$10 one-time purchase.

License

Personal and single-business use. Redistribution or resale as a standalone component is not allowed.

6d:T4ed,

Make text arrive softly, without splitting layers by hand

Fade Words Lite is a free Framer Code Component for simple word-by-word text reveals. Add your sentence, adjust the font and timing, and use it in hero sections, intros, product pages, and editorial moments where the copy should feel a little more alive.

Why it is different

- Keeps the component intentionally light: one text field, Framer Font control, color, timing, distance, and replay.

- Shows the finished text on Canvas so designing does not feel broken.

- Respects reduced-motion settings and shows the full sentence without animation.

- Uses one accessible sentence label while hiding the visual split words from screen readers.

- Uses no external images, icons, or animation libraries.

Key features

- Word-by-word fade and upward reveal

- Framer Font and Color controls

- Adjustable speed, stagger, distance, and starting opacity

- Play once or repeat on viewport re-entry

- Canvas-safe editing state

- Reduced-motion support

Works well for

- Hero headings

- Section intros

- Product launch pages

- Portfolio opening copy

- Short editorial statements

6e:T793,

Turn a crowded pricing page into a clear recommendation

PlanMatch lets visitors switch on the capabilities they need and immediately shows the closest plan, its price, and the reasons behind the match. It replaces hand-wired scoring logic with one responsive Framer Code Component.

Why it is different

- Shows every need on one screen instead of forcing visitors through a long quiz.

- Uses editable weights across two or three plans, so the recommendation logic stays visible and predictable.

- Explains the match with the selected needs that best support the result.

- Optionally syncs selections to one URL query parameter for shareable recommendations.

- Uses semantic switch buttons, visible focus, 44px touch targets, live result announcements, and reduced-motion handling.

- Includes optional Glass UI styling. Turn it off for a solid, neutral interface without losing any function.

Works well for

- SaaS and AI product pricing

- Membership and subscription tiers

- Productized services

- Agency client projects with several packages

- Any offer where visitors ask “Which plan is for me?”

### Setup

1. Add two or three plans with names, prices, CTA labels, and links.

2. Add up to six needs.

3. Give each need a weight for Plan 1, Plan 2, and Plan 3.

4. Preview the switches and adjust the weights until the recommendation matches your offer.

5. Keep URL Sync on for shareable results, or turn it off for local-only state.

Important

- PlanMatch recommends from the weights you configure; it does not provide financial, legal, or purchasing advice.

- It does not process payments or calculate usage-based prices.

- Use two or three plans and up to six needs in v1.

- If no need is selected, Plan 2 is shown as the flexible starting point.

6f:T782,

Build a clearer form without replacing Framer Forms

StepFlow Native turns a long Framer Native Form into a focused step-by-step flow. Keep Framer's Email, Google Sheets, Webhook, spam-protection, and rate-limiting workflow while StepFlow handles navigation, progress, validation, focus, and motion.

Two ways to start

- Starter Form: drop it inside a Native Form and get a ready-to-use three-step contact flow with no Frames to connect.

- Connected Frames: connect 2–8 of your own Framer Frames when you want complete visual and content control.

Why it is different

- Preserves every mounted step and its field values for one complete Native Form submission.

- Requires no detach/unlink workflow and no DOM layer-naming convention.

- Includes required-field blocking, invalid-field focus, keyboard-friendly navigation, and an aria-live step announcement.

- Supports bar, dots, or no progress indicator and fade, slide, or no motion.

- Automatically removes nonessential motion when visitors prefer reduced motion.

Works well for

- Lead capture and quote requests

- Client intake and applications

- Onboarding and signup flows

- Surveys, bookings, and contact forms

Setup

1. Add a Framer Native Form and configure Send To.

2. Place StepFlow Native inside that Form.

3. Use the built-in Starter Form, or switch to Connected Frames and add 2–8 Frames to Steps.

Important

- StepFlow Native manages the multi-step experience; Framer Native Form manages submission destinations and spam protection.

- Configure Email, Google Sheets, or Webhook on the parent Native Form before publishing.

- In Connected Frames mode, use native Framer form fields inside the connected Frames.

70:Tbe5,

SoftBounce

SoftBounce is an animated glass-style CTA button kit for Framer.

It is designed to make simple call-to-action buttons feel more tactile, playful, and premium without adding unnecessary visual clutter.

This component includes 5 polished motion styles in one clean Framer component, making it easy to add interactive CTA moments to landing pages, portfolio sites, startup pages, product pages, and hero sections.

What’s Included

Jelly Bounce
Magnetic Bounce
Bubble Bounce
Spring Pop
Rocket CTA

Each motion style is designed to feel smooth, responsive, and lightweight. You can switch between variants directly from the Framer editor using property controls.

Key Features

5 animated CTA button styles
Modern glass-style visual system
Smooth physics-based motion
Customizable text and link
Built-in icon options
Adjustable icon position
Customizable colors
Radius and padding controls
Responsive layout
Canvas performance mode
No code editing required

Perfect For

SoftBounce works well for:

Landing pages
SaaS websites
Product launches
Portfolio websites
Agency websites
Hero sections
Pricing pages
Newsletter CTAs

Easy Customization

You can customize the button directly inside the Framer editor.

Available controls include:

Button text
Link URL
Icon
Icon position
Motion variant
Fill style
Hue
Text color
Radius
Padding
Hide on mobile
Canvas performance mode

About This Component

This is a Framer code component, built with code and designed to be customized without editing code.

You can adjust the text, colors, motion style, icon, radius, padding, and other options directly from the Framer editor using property controls.

To keep the component stable and easy to update, unlinking is not supported. The original source code cannot be viewed or edited.

When an update button appears next to the component, it means a newer version is available. Apply the update to keep the component running with the latest improvements and best performance.

Refund Policy

60:["$","$L61",null,{"value":{"fallback":{"$inf$activity-creator-0dd86399-fd80-4a26-b21d-bae04f727184-all:/unified/creator/0dd86399-fd80-4a26-b21d-bae04f727184/activity/":[{"data":[{"id":"01a0669a-e62b-712f-aac8-e76bc054bd3e","type":"component.created","target":{"type":"component","id":"P7Du0FmPOLa1h4R95HiV","preview":"Token Retreat Field","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/01a0669a-b503-73cc-b4ca-f91438e377bb.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-03T09:30:22.635Z","latestAt":"2026-09-03T09:30:22.635Z"},{"id":"01a04c50-8fc3-71a6-a23a-b66a3a9db932","type":"component.created","target":{"type":"component","id":"nskLfk5EpvSPxmZ4HVXX","preview":"Gridline Gesture","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/01a04c4e-10dd-72bd-a744-2718f77d5512.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-29T06:59:03.235Z","latestAt":"2026-08-29T06:59:03.235Z"},{"id":"01a018d9-9526-75aa-90ff-da9befb7c466","type":"comment.reply","target":{"type":"post","id":"019fb0f0-d622-72ba-8490-a4ce714fea87","preview":"AgentPulse","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019fb0f0-c00d-7309-9b32-a21d360e7698.png","targetDeleted":false,"owned":true,"actions":{"postId":"019fb0f0-d622-72ba-8490-a4ce714fea87","like":{"count":17,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a018d9-94db-75ec-8f40-6ef243a490cc","preview":"Yes, here’s the live preview: https://methodical-prism-015554.framer.app/\nYou can test the state buttons and see the animated orb behavior there.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Yes, here’s the live preview: "},{"type":"text","text":"https://methodical-prism-015554.framer.app/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://methodical-prism-015554.framer.app/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"You can test the state buttons and see the animated orb behavior there."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019fb0f0-d622-72ba-8490-a4ce714fea87","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a016a8-493f-734a-8ea4-798a1e591264"},"repost":null}},"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-19T07:08:27.814Z","latestAt":"2026-08-19T07:08:27.814Z"},{"id":"019fb5b5-f5a7-7556-b0e0-c125acc4dcde","type":"component.created","target":{"type":"component","id":"I7vr80vjK31v5Ov7Sf8b","preview":"Afterimage","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019fb5b5-d1cf-76e8-a2b5-e12e1911ca8f.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-31T01:07:08.839Z","latestAt":"2026-07-31T01:07:08.839Z"},{"id":"019fb140-7bf5-77fb-81ca-3833675fb1d8","type":"comment.reply","target":{"type":"post","id":"019fb0f0-d622-72ba-8490-a4ce714fea87","preview":"AgentPulse","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019fb0f0-c00d-7309-9b32-a21d360e7698.png","targetDeleted":false,"owned":true,"actions":{"postId":"019fb0f0-d622-72ba-8490-a4ce714fea87","like":{"count":17,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019fb140-7bd5-74e4-8e82-9cb523fe0375","preview":"Oops, what a silly mistake! Thanks for the heads up!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Oops, what a silly mistake! Thanks for the heads up!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019fb0f0-d622-72ba-8490-a4ce714fea87","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019fb128-63c0-714f-bdbf-b6070234516b"},"repost":null}},"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-30T04:20:21.109Z","latestAt":"2026-07-30T04:20:21.109Z"},{"id":"019fb13f-ccc6-7178-8661-e88ce4728269","type":"comment.liked","target":{"type":"comment","id":"019fb128-63c0-714f-bdbf-b6070234516b","preview":"your giving away your component url","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"your giving away your component url"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019fb0f0-d622-72ba-8490-a4ce714fea87","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019fb128-63c0-714f-bdbf-b6070234516b"},"repost":null}},"context":{"type":"post","id":"019fb0f0-d622-72ba-8490-a4ce714fea87","preview":"AgentPulse","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019fb0f0-c00d-7309-9b32-a21d360e7698.png","targetDeleted":false,"owned":true,"actions":{"postId":"019fb0f0-d622-72ba-8490-a4ce714fea87","like":{"count":17,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-30T04:19:36.252Z","latestAt":"2026-07-30T04:19:36.252Z"},{"id":"019fb0f0-d77a-75aa-82d8-bbccb1ac933d","type":"component.created","target":{"type":"component","id":"hvlMDaT1GZIRdszJuAxc","preview":"AgentPulse","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019fb0f0-c00d-7309-9b32-a21d360e7698.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-30T02:53:21.658Z","latestAt":"2026-07-30T02:53:21.658Z"},{"id":"019f8cfc-c6fe-75cb-b19e-00091c2b5920","type":"component.created","target":{"type":"component","id":"DYoNrAf0uKv96u9tBqp2","preview":"CaseLens","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f8cfc-9de4-73ff-84cb-1b01213b82d8.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-23T03:20:04.094Z","latestAt":"2026-07-23T03:20:04.094Z"},{"id":"019f8837-5183-71aa-94ef-087ab4f05fd2","type":"component.created","target":{"type":"component","id":"gs7iHAcIhTLmci3ZcmRV","preview":"PlanProof","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f8837-2e49-7088-8665-93d95fe87370.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-22T05:05:54.563Z","latestAt":"2026-07-22T05:05:54.563Z"},{"id":"019f823d-c1e8-7139-b954-b1b2981edd82","type":"component.created","target":{"type":"component","id":"AsSDiBW89yb3sODWpVjX","preview":"AnswerVault","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f823d-947c-741b-927d-998e36b815c2.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-21T01:15:13.256Z","latestAt":"2026-07-21T01:15:13.256Z"},{"id":"019f793a-482f-769f-bcff-cd458e521bba","type":"component.created","target":{"type":"component","id":"ZtvddIYctF9dtCNwIvJb","preview":"Campaign Link","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f793a-17fa-73d9-861d-9b61f8eb2ba5.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-19T07:14:50.543Z","latestAt":"2026-07-19T07:14:50.543Z"},{"id":"019f746d-63ba-71ca-9da5-bf86c43258cf","type":"component.created","target":{"type":"component","id":"KDStc3no3KyXQmOpTwVB","preview":"CommandPilot","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f746c-e7a8-7119-a19f-c9a77875cc7d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-18T08:52:33.850Z","latestAt":"2026-07-18T08:52:33.850Z"},{"id":"019f73bc-01fe-77fb-b307-cd34d1113785","type":"component.created","target":{"type":"component","id":"XEzp0iinUKJ2QAxCa2FW","preview":"Fade Words Lite","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f73bb-cb60-72be-9c7d-0c89d86b1043.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-18T05:38:48.958Z","latestAt":"2026-07-18T05:38:48.958Z"},{"id":"019f6dc2-3b14-71cb-9b08-c15d08a45b45","type":"component.created","target":{"type":"component","id":"xURktB3mrb1goeDMZzNP","preview":"PlanMatch","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f6dc1-ed4f-777a-87b2-2acb8627fe8b.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-17T01:47:53.492Z","latestAt":"2026-07-17T01:47:53.492Z"},{"id":"019f6a58-ed17-77b5-a4fe-73696dd6fe37","type":"component.created","target":{"type":"component","id":"fwptT9I1GMjvgCyiRMvs","preview":"StepFlow Native","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f6a56-e953-7351-aed4-0193c6ed5907.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-16T09:54:00.599Z","latestAt":"2026-07-16T09:54:00.599Z"},{"id":"019ef34c-462b-729e-a6f9-f716b2311675","type":"component.created","target":{"type":"component","id":"mUvszLjhaZwBRKGKXRGE","preview":"SoftBounce","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/ghepa42x","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","slug":"uukk-ll","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-23T07:05:22.731Z","latestAt":"2026-06-23T07:05:22.731Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:0dd86399-fd80-4a26-b21d-bae04f727184:/unified/posts/?creator=0dd86399-fd80-4a26-b21d-bae04f727184&with=reposts":[{"data":[{"id":"01a0669a-e44d-74eb-b3e9-e5c2b3e9fae9","title":null,"body":"

Token Retreat Field starts as a tight pile. Hover gives one token a new skin; press it and the rest make room. Built for image-led launches that want a moment of focus without another generic card grid.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Token Retreat Field starts as a tight pile. Hover gives one token a new skin; press it and the rest make room. Built for image-led launches that want a moment of focus without another generic card grid."}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"P7Du0FmPOLa1h4R95HiV","resolved":true,"title":"Token Retreat Field","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What it includes"}]},{"type":"paragraph","content":[{"type":"text","text":"- Dense starting cluster with a shared, editable "},{"type":"text","text":"Cluster Size","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Ten original Y2K inline SVG icons: smiley, love signal, chrome star, butterfly, cyber pet, lucky star, flame, disk, alien, and spiral"}]},{"type":"paragraph","content":[{"type":"text","text":"- Three image slots per token: Default, Hover, and Click"}]},{"type":"paragraph","content":[{"type":"text","text":"- Waiting, Hover, and Active color controls"}]},{"type":"paragraph","content":[{"type":"text","text":"- Press-only retreat: the selected token remains central while the others fan outward"}]},{"type":"paragraph","content":[{"type":"text","text":"- Press the active token again to regroup the field"}]},{"type":"paragraph","content":[{"type":"text","text":"- Horizontal, center-aligned ON/OFF state label beneath the last interacted token (never rotates)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional scene image, labels, retreat distance, and cluster size"}]},{"type":"paragraph","content":[{"type":"text","text":"- Background follows any Fixed Framer frame size; verified at tablet, mobile, and 320px widths"}]},{"type":"paragraph","content":[{"type":"text","text":"- Keyboard buttons with "},{"type":"text","text":"aria-pressed","marks":[{"type":"code"}]},{"type":"text","text":", Static Renderer fallback, and Reduced Motion support"}]},{"type":"paragraph","content":[{"type":"text","text":"## Best for"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fashion, music, art, and culture launches"}]},{"type":"paragraph","content":[{"type":"text","text":"- Playful portfolio or agency landing pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Interactive campaign maps and visual indexes"}]},{"type":"paragraph","content":[{"type":"text","text":"- Product stories where one object needs to become the focal point"}]},{"type":"paragraph","content":[{"type":"text","text":"Why it feels different"}]},{"type":"paragraph","content":[{"type":"text","text":"Most token fields are either static piles or permanently scattered bubbles. Token Retreat Field treats the cluster as a social object: hover changes its skin, a press creates focus, and every other token physically makes room."}]},{"type":"paragraph","content":[{"type":"text","text":"Usage"}]},{"type":"paragraph","content":[{"type":"text","text":"1. Add Token Retreat Field to a Framer page."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Open the "},{"type":"text","text":"Tokens","marks":[{"type":"code"}]},{"type":"text","text":" array and add up to the number of tokens your layout needs."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Use the built-in Y2K SVG set or attach a Default Icon, Hover Icon, and Click Icon to any token for custom artwork."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Keep X/Y values close together for a dense pile. Increase "},{"type":"text","text":"Retreat Distance","marks":[{"type":"code"}]},{"type":"text","text":" only when the preview needs more breathing room."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Preview hover, keyboard focus, press, regroup, and Reduced Motion before publishing."}]}]},"introduction":"Dense interactive token cluster fo","slug":"token-retreat-field","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/01a0669a-b503-73cc-b4ca-f91438e377bb.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1160,"height":693}}],"post":null,"createdAt":"2026-09-03T09:30:21.624Z","updatedAt":"2026-09-03T09:30:21.624Z","publishedAt":"2026-09-03T09:30:21.619Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://sparkling-truly-837326.framer.app/token-retreat-field","price":"3","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/fe79867f-4a7b-4d33-84a9-e3530d5eda32","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"hsJ3XFL8WG55dhT8BL2M","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-03T09:30:22.157Z","updatedAt":"2026-09-03T09:30:22.157Z"},{"id":"01a04c50-8dc3-7552-a8f5-4d123de5565a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"nskLfk5EpvSPxmZ4HVXX","resolved":true,"title":"Gridline Gesture","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What it includes"}]},{"type":"paragraph","content":[{"type":"text","text":"- Dense starting cluster with a shared, editable "},{"type":"text","text":"Cluster Size","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Three image slots per token: Default, Hover, and Click"}]},{"type":"paragraph","content":[{"type":"text","text":"- Waiting, Hover, and Active color controls"}]},{"type":"paragraph","content":[{"type":"text","text":"- Press-only retreat: the selected token remains central while the others fan outward"}]},{"type":"paragraph","content":[{"type":"text","text":"- Press the active token again to regroup the field"}]},{"type":"paragraph","content":[{"type":"text","text":"- Horizontal, center-aligned ON/OFF state label beneath the last interacted token (never rotates)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional scene image, labels, retreat distance, and cluster size"}]},{"type":"paragraph","content":[{"type":"text","text":"- Keyboard buttons with "},{"type":"text","text":"aria-pressed","marks":[{"type":"code"}]},{"type":"text","text":", Static Renderer fallback, and Reduced Motion support"}]},{"type":"paragraph","content":[{"type":"text","text":"Best for"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fashion, music, art, and culture launches"}]},{"type":"paragraph","content":[{"type":"text","text":"- Playful portfolio or agency landing pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Interactive campaign maps and visual indexes"}]},{"type":"paragraph","content":[{"type":"text","text":"- Product stories where one object needs to become the focal point"}]},{"type":"paragraph","content":[{"type":"text","text":" Why it feels different"}]},{"type":"paragraph","content":[{"type":"text","text":"Most token fields are either static piles or permanently scattered bubbles. Token Retreat Field treats the cluster as a social object: hover changes its skin, a press creates focus, and every other token physically makes room."}]},{"type":"paragraph","content":[{"type":"text","text":"Usage"}]},{"type":"paragraph","content":[{"type":"text","text":"1. Add Token Retreat Field to a Framer page."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Open the "},{"type":"text","text":"Tokens","marks":[{"type":"code"}]},{"type":"text","text":" array and add up to the number of tokens your layout needs."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Attach a Default Icon, Hover Icon, and Click Icon to each token. If an image is omitted, a cute kitschy pixel glyph fallback is used."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Keep X/Y values close together for a dense pile. Increase "},{"type":"text","text":"Retreat Distance","marks":[{"type":"code"}]},{"type":"text","text":" only when the preview needs more breathing room."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Preview hover, keyboard focus, press, regroup, and Reduced Motion before publishing."}]}]},"introduction":"nteractive, Media","slug":"gridline-gesture","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/01a04c4e-10dd-72bd-a744-2718f77d5512.png","metadata":{"tint":{"h":0,"s":0,"l":14},"width":1244,"height":911}}],"post":null,"createdAt":"2026-08-29T06:59:02.231Z","updatedAt":"2026-08-29T06:59:02.231Z","publishedAt":"2026-08-29T06:59:02.228Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://sparkling-truly-837326.framer.app/gridline-gesture-bend","price":"3","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/56e41d30-58f1-4f61-bd76-3a82010969af","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"adc1VnUr58Ayp9SN1VUO","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-29T06:59:02.723Z","updatedAt":"2026-08-29T06:59:02.723Z"},{"id":"01a04bc0-5aed-73c6-bace-da1d12c5044a","title":null,"body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I said I’d share more soon… so here it is."}]},{"type":"paragraph","content":[{"type":"text","text":"Visual Motion Playground is live.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"I built it for that awkward moment before creating a component in Framer — when you know the feeling you want, but not the exact combination of material, depth, timing, and motion values."}]},{"type":"paragraph","content":[{"type":"text","text":"The free Lite version lets you explore presets, test interactions, compare different motion feels, and copy the CSS directly from your browser:"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"point_right","emoji":"👉"}},{"type":"text","text":" "},{"type":"text","text":"https://attached-assets--bloglluukk.replit.app/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://attached-assets--bloglluukk.replit.app/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Honestly, I have no idea who will actually buy the Pro version."}]},{"type":"paragraph","content":[{"type":"text","text":"I made it because I wanted it for my own workflow — not because I had a perfectly validated business plan."}]},{"type":"paragraph","content":[{"type":"text","text":"I have a day job, so this doesn’t need to pretend to be a giant startup. It can just be a small, useful tool."}]},{"type":"paragraph","content":[{"type":"text","text":"And I’d rather see someone use it than spend too much time optimizing every dollar."}]},{"type":"paragraph","content":[{"type":"text","text":"So I made a small launch code for the Framer community:"}]},{"type":"paragraph","content":[{"type":"text","text":"Use code ","marks":[{"type":"bold"}]},{"type":"text","text":"KNK260","marks":[{"type":"code"}]},{"type":"text","text":" to get Pro for $8 instead of $15.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Available until "},{"type":"text","text":"September 8, 2026 at 00:00 UTC","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"point_right","emoji":"👉"}},{"type":"text","text":" "},{"type":"text","text":"https://knokknok1997.lemonsqueezy.com/checkout/buy/238b53fc-de70-4046-b747-edb65a723b4e?checkout%5Bdiscount_code%5D=KNK260","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://knokknok1997.lemonsqueezy.com/checkout/buy/238b53fc-de70-4046-b747-edb65a723b4e?checkout%5Bdiscount_code%5D=KNK260","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Pro includes deeper Inspector controls, local image testing, the full preset library, CSS and Framer Motion export, JSON export, and a private offline HTML version."}]},{"type":"paragraph","content":[{"type":"text","text":"It’s not a Framer plugin yet."}]},{"type":"paragraph","content":[{"type":"text","text":"But if people genuinely want an “apply this to my selected layer” button, maybe that becomes the next version."}]},{"type":"paragraph","content":[{"type":"text","text":"For now, I’m just curious to see where this little tool ends up. "},{"type":"emoji","attrs":{"name":"fire","emoji":"🔥"}}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/CvwHk02efA016aaHlrkQnJNuEwGl1JnCkWnSGHmU5SJEw.m3u8","metadata":{"posterUrl":"https://image.mux.com/CvwHk02efA016aaHlrkQnJNuEwGl1JnCkWnSGHmU5SJEw/thumbnail.webp?time=56.566","aspectRatio":"640:259","duration":78.044633}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-29T04:21:32.529Z","updatedAt":"2026-08-29T04:21:32.529Z"},{"id":"019fe12b-94ff-744b-b093-9fde374f7059","title":null,"body":"$65","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I started learning Framer from an ebook… then wondered: “Why am I only getting likes?”","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Hi! I’m a visual designer who loves motion, interaction, and anything that feels satisfying to look at. "},{"type":"emoji","attrs":{"name":"wave","emoji":"👋"}}]},{"type":"paragraph","content":[{"type":"text","text":"I recently started diving deeper into Framer after reading an ebook about it."}]},{"type":"paragraph","content":[{"type":"text","text":"Interactive components, micro-interactions, playful sections… I was having so much fun that I started making things and putting them out there."}]},{"type":"paragraph","content":[{"type":"text","text":"But then I noticed something interesting."}]},{"type":"paragraph","content":[{"type":"text","text":"People were liking my work, but there wasn’t much clicking or buying."}]},{"type":"paragraph","content":[{"type":"text","text":"And I kept wondering:"}]},{"type":"paragraph","content":[{"type":"text","text":"“Why do people like this… but not actually use it?”","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"That question made me think more seriously about what people come to the Framer marketplace and community for."}]},{"type":"paragraph","content":[{"type":"text","text":"As a designer, I naturally want to make beautiful interactions and interesting motion."}]},{"type":"paragraph","content":[{"type":"text","text":"But the person actually building a website may be thinking:"}]},{"type":"paragraph","content":[{"type":"text","text":"“Can this help me finish my project faster?”","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"That gap between "},{"type":"text","text":"what I enjoy creating","marks":[{"type":"italic"}]},{"type":"text","text":" and "},{"type":"text","text":"what someone wants to use right now","marks":[{"type":"italic"}]},{"type":"text","text":" became really interesting to me."}]},{"type":"paragraph","content":[{"type":"text","text":"Then another thought came up:"}]},{"type":"paragraph","content":[{"type":"text","text":"What if I didn’t have to keep changing numbers and code just to find the right motion?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"What if I could adjust motion more visually — almost like tweaking it by feel?"}]},{"type":"paragraph","content":[{"type":"text","text":"So… I started building exactly that."}]},{"type":"paragraph","content":[{"type":"text","text":"And surprisingly, it’s already turning into something that actually works. "},{"type":"emoji","attrs":{"name":"fire","emoji":"🔥"}}]},{"type":"paragraph","content":[{"type":"text","text":"I’m currently experimenting with a tool that makes it easier to play with motion, timing, and visual feel without constantly jumping back and forth between values."}]},{"type":"paragraph","content":[{"type":"text","text":"Still very much a work in progress, but I’m having a lot of fun building it."}]},{"type":"paragraph","content":[{"type":"text","text":"I’ll share more soon. "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019fe12b-7afe-76ea-a0c6-882f3645f3f5.png","metadata":{"tint":{"h":0,"s":0,"l":17},"width":1916,"height":792}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019fe12b-7a54-72c4-8ef7-7dd3b2b4c5f7.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1885,"height":811}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-08T11:39:17.635Z","updatedAt":"2026-08-08T11:39:17.635Z"},{"id":"019fb5b5-f355-7668-b4e1-6e22d333700b","title":null,"body":"

Just shipped Afterimage for Framer.

It’s an editorial photo exhibition wall for photographers, creative studios, fashion labels, galleries, art directors, and image-led portfolios.

Built with a cinematic image stage, filmstrip navigation, project metadata, descriptive notes, grain texture, and a polished archive mood. Use it when a standard gallery feels too flat and your work needs to feel curated.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just shipped Afterimage for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"It’s an editorial photo exhibition wall for photographers, creative studios, fashion labels, galleries, art directors, and image-led portfolios."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with a cinematic image stage, filmstrip navigation, project metadata, descriptive notes, grain texture, and a polished archive mood. Use it when a standard gallery feels too flat and your work needs to feel curated."}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"I7vr80vjK31v5Ov7Sf8b","resolved":true,"title":"Afterimage","body":"$66","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Afterimage is an editorial photo exhibition wall for Framer, built for visual brands that want their images to feel curated instead of simply displayed."}]},{"type":"paragraph","content":[{"type":"text","text":"It gives you a premium gallery section with a cinematic image stage, filmstrip navigation, project metadata, descriptive notes, subtle grain texture, archive-style mood, and polished static-safe behavior for Framer Canvas and export."}]},{"type":"paragraph","content":[{"type":"text","text":"Use it to present photography portfolios, fashion campaigns, studio case studies, art direction work, lookbooks, editorial collections, product shoots, visual archives, or any image-led brand story that needs to feel more like an exhibition than a standard grid."}]},{"type":"paragraph","content":[{"type":"text","text":"This component is recommended for photographers, creative studios, fashion labels, art directors, portfolio designers, boutique agencies, galleries, and premium brands that want a more atmospheric way to show selected work."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of a basic image grid or carousel, Afterimage creates a focused viewing moment: one hero image, supporting context, and a filmstrip of related frames so visitors can move through the collection without losing the editorial mood.!!"}]}]},"introduction":"Editorial Photo Exhibition for Fra","slug":"afterimage","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019fb5b5-d1cf-76e8-a2b5-e12e1911ca8f.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":900,"height":680}}],"post":null,"createdAt":"2026-07-31T01:07:07.771Z","updatedAt":"2026-07-31T01:07:07.771Z","publishedAt":"2026-07-31T01:07:07.760Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://swift-tasks-893716.framer.app/","price":"8","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/f97c2d35-1226-4c07-a900-86bafaa84d9a","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"0vL9FPTV682c7wcgGjmd","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":13,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-31T01:07:08.245Z","updatedAt":"2026-07-31T01:07:08.245Z"},{"id":"019fb179-5209-7639-82a5-1d434161d744","title":null,"body":"

No wonder it got so much traction so fast—I literally posted the original URL by mistake. 🤦‍♂ Props to whoever was quick enough to grab it, enjoy!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"No wonder it got so much traction so fast—I literally posted the original URL by mistake. "},{"type":"emoji","attrs":{"name":"man_facepalming","emoji":"🤦‍♂"}},{"type":"text","text":" Props to whoever was quick enough to grab it, enjoy!"}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-07-30T05:22:41.563Z","createdAt":"2026-07-30T05:22:25.935Z","updatedAt":"2026-07-30T05:22:41.563Z"},{"id":"019fb0f0-d622-72ba-8490-a4ce714fea87","title":null,"body":"

Just shipped AgentPulse for Framer: a premium AI agent status hero with a particle orb, editable listening/thinking/searching/working states, text sheen, Glass mode, and static-safe animation behavior.

Built for AI SaaS landing pages, agent demos, assistants, and workflow automation products that need to show that the AI is actually working.

Preview:

https://framer.com/m/AgentPulse-yfnZTp.js@zRHwuGa7Dy81L4sTPAnF

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just shipped AgentPulse for Framer: a premium AI agent status hero with a particle orb, editable listening/thinking/searching/working states, text sheen, Glass mode, and static-safe animation behavior."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for AI SaaS landing pages, agent demos, assistants, and workflow automation products that need to show that the AI is actually working."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview:"}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer.com/m/AgentPulse-yfnZTp.js@zRHwuGa7Dy81L4sTPAnF","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.com/m/AgentPulse-yfnZTp.js@zRHwuGa7Dy81L4sTPAnF","target":"_blank"}}]}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"hvlMDaT1GZIRdszJuAxc","resolved":true,"title":"AgentPulse","body":"$67","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"AgentPulse is a premium Framer component for AI products that need to make invisible agent work feel visible, calm, and trustworthy."}]},{"type":"paragraph","content":[{"type":"text","text":"Instead of using a generic chat bubble or decorative blob, AgentPulse gives your landing page a polished AI status moment: a dense particle orb, four editable agent states, clickable controls, current-state microcopy, signal metrics, text sheen, optional Glass mode, and a CTA with press-only physical motion."}]},{"type":"paragraph","content":[{"type":"text","text":"It is built for AI SaaS landing pages, agent demos, assistant products, workflow automation tools, voice interfaces, and support AI previews."}]},{"type":"paragraph","content":[{"type":"text","text":"The component is static-renderer safe for Framer Canvas and export. Orb motion, sheen, auto-cycle, and press transforms are disabled in static or reduced-motion contexts, so it stays editor-friendly and export-safe."}]},{"type":"customHeading","content":[{"type":"text","text":" What's Included"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Animated AI orb built from a dense particle sphere"}]},{"type":"paragraph","content":[{"type":"text","text":"- Four editable states: Listening, Thinking, Searching, Working"}]},{"type":"paragraph","content":[{"type":"text","text":"- Clickable state controls"}]},{"type":"paragraph","content":[{"type":"text","text":"- Current-state caption and detail text"}]},{"type":"paragraph","content":[{"type":"text","text":"- Text sheen effect"}]},{"type":"paragraph","content":[{"type":"text","text":"- Three editable signal metrics"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional iOS-style Glass mode"}]},{"type":"paragraph","content":[{"type":"text","text":"- Hero and Compact layout modes"}]},{"type":"paragraph","content":[{"type":"text","text":"- Press-only CTA and state button motion"}]},{"type":"paragraph","content":[{"type":"text","text":"- Static renderer and Reduced Motion safeguards"}]},{"type":"customHeading","content":[{"type":"text","text":"Best For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- AI SaaS landing pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Agent and assistant product demos"}]},{"type":"paragraph","content":[{"type":"text","text":"- Workflow automation sites"}]},{"type":"paragraph","content":[{"type":"text","text":"- Chatbot and support AI sections"}]},{"type":"paragraph","content":[{"type":"text","text":"- Voice AI previews"}]},{"type":"paragraph","content":[{"type":"text","text":"- Premium AI hero/status moments"}]}]},"introduction":"AI Status Orb + Hero for Framer","slug":"agentpulse","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019fb0f0-c00d-7309-9b32-a21d360e7698.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1120,"height":760}}],"post":null,"createdAt":"2026-07-30T02:53:20.935Z","updatedAt":"2026-07-30T02:53:20.935Z","publishedAt":"2026-07-30T02:53:20.926Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://methodical-prism-015554.framer.app/","price":"6","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/8d978d0c-e55a-4dad-ba1c-df97f5f67de1","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"4Ok3CCBIZw80ztoNlS5z","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":17,"liked":false},"comments":{"count":5},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-30T02:53:21.315Z","updatedAt":"2026-07-30T02:53:21.315Z"},{"id":"019f8cfc-c5a8-74af-ae90-94edfa56cdad","title":null,"body":"

Just shipped CaseLens for Framer: an editorial before/after case-study reveal built for premium agency portfolios, with client metadata, proof metrics, Glass mode, and static-renderer safe behavior!!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just shipped CaseLens for Framer: an editorial before/after case-study reveal built for premium agency portfolios, with client metadata, proof metrics, Glass mode, and static-renderer safe behavior!!"}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"DYoNrAf0uKv96u9tBqp2","resolved":true,"title":"CaseLens","body":"$68","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CaseLens turns a transformation image into a high-taste agency case-study section: before/after reveal, client context, project metadata, proof metrics, glass mode, and a press-only CTA in one editable Framer component. The default tone is deliberately premium: make the reveal feel expensive."}]},{"type":"customHeading","content":[{"type":"text","text":"What it includes"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Before/after image reveal with draggable lens divider"}]},{"type":"paragraph","content":[{"type":"text","text":"- Static-renderer safe fallback for Canvas and export"}]},{"type":"paragraph","content":[{"type":"text","text":"- Keyboard-accessible reveal control"}]},{"type":"paragraph","content":[{"type":"text","text":"- Editable client, discipline, year, title, summary, CTA, and URL"}]},{"type":"paragraph","content":[{"type":"text","text":"- Three editable proof metrics"}]},{"type":"paragraph","content":[{"type":"text","text":"- Premium editorial default styling"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional iOS-style glass surface"}]},{"type":"paragraph","content":[{"type":"text","text":"- Press-only CTA motion with no hover wobble"}]},{"type":"paragraph","content":[{"type":"text","text":"- Reduced Motion support"}]},{"type":"paragraph","content":[{"type":"text","text":"- Token-friendly colors and radius controls"}]},{"type":"customHeading","content":[{"type":"text","text":" Best for"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Brand agency case studies"}]},{"type":"paragraph","content":[{"type":"text","text":"- Creative studio portfolios"}]},{"type":"paragraph","content":[{"type":"text","text":"- Redesign and rebrand pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Architecture and interior before/after reveals"}]},{"type":"paragraph","content":[{"type":"text","text":"- Retouching, photography, and production portfolios"}]},{"type":"paragraph","content":[{"type":"text","text":"- Premium landing pages that need one distinctive proof section"}]},{"type":"customHeading","content":[{"type":"text","text":" Why it feels premium"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Most compare sliders feel like a utility widget. CaseLens behaves more like a creative director’s case-study spread: restrained typography, client metadata, proof metrics, a cinematic reveal, and no cheap hover wobble."}]},{"type":"paragraph","content":[{"type":"text","text":"It is intentionally opinionated. The target buyer is the person who wants their work to feel expensive before the visitor reads a single line of copy."}]},{"type":"customHeading","content":[{"type":"text","text":"Usage"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"1. Add CaseLens to a Framer page."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Add the component to the Workspace Library if it was pasted as a Code file."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Replace the before and after images."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Edit the client, discipline, year, headline, summary, and CTA."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Tune the starting reveal position."}]},{"type":"paragraph","content":[{"type":"text","text":"6. Toggle Glass mode depending on the page background."}]},{"type":"paragraph","content":[{"type":"text","text":"7. Preview desktop and mobile before publishing."}]},{"type":"paragraph"}]},"introduction":"Editorial before/after case-study","slug":"caselens","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f8cfc-9de4-73ff-84cb-1b01213b82d8.png","metadata":{"tint":{"h":0,"s":50,"l":6},"width":898,"height":638}}],"post":null,"createdAt":"2026-07-23T03:20:03.416Z","updatedAt":"2026-07-23T03:20:03.416Z","publishedAt":"2026-07-23T03:20:03.413Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://nurtured-evidence-275810.framer.app/","price":"10","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/c714dc82-9ec4-490d-902e-4a7eac65bc0b","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"VQwOykbns9u89CvOGfOI","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-23T03:20:03.752Z","updatedAt":"2026-07-23T03:20:03.752Z"},{"id":"019f8837-505d-71fb-a593-35aaf0a069a7","title":null,"body":"

ust shipped PlanProof for Framer: a pricing toggle and feature comparison system with three editable plans, mobile comparison rows, Glass mode, and press-only CTA motion.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"ust shipped PlanProof for Framer: a pricing toggle and feature comparison system with three editable plans, mobile comparison rows, Glass mode, and press-only CTA motion."}]},{"type":"paragraph"}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"gs7iHAcIhTLmci3ZcmRV","resolved":true,"title":"PlanProof","body":"$69","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"What it includes"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Monthly/yearly billing toggle"}]},{"type":"paragraph","content":[{"type":"text","text":"- Three editable plan cards"}]},{"type":"paragraph","content":[{"type":"text","text":"- Highlighted recommended plan"}]},{"type":"paragraph","content":[{"type":"text","text":"- CTA links per plan"}]},{"type":"paragraph","content":[{"type":"text","text":"- Responsive feature comparison table"}]},{"type":"paragraph","content":[{"type":"text","text":"- Mobile-friendly comparison rows"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional iOS-style glass effect"}]},{"type":"paragraph","content":[{"type":"text","text":"- Five press-only physical interaction presets with no hover wobble"}]},{"type":"paragraph","content":[{"type":"text","text":"- Static-renderer and Reduced Motion safe behavior"}]},{"type":"paragraph","content":[{"type":"text","text":"- Token-friendly colors and editable radius"}]},{"type":"customHeading","content":[{"type":"text","text":" Best for"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- SaaS pricing pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- AI tool landing pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Framer templates"}]},{"type":"paragraph","content":[{"type":"text","text":"- Productized service pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Startup waitlist and launch pages"}]},{"type":"customHeading","content":[{"type":"text","text":"Why it feels premium"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Most pricing components stop at cards. PlanProof keeps the decision layer together: billing cycle, plan emphasis, CTA links, and feature comparison all stay visually aligned. It is built for the part of the page where buyers decide, not just where prices are displayed."}]},{"type":"customHeading","content":[{"type":"text","text":"Usage"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"1. Add PlanProof to a Framer page."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Edit the three Plans in the Properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Edit Feature Rows to match your offer."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Set the default billing cycle and yearly savings badge."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Toggle Glass and Motion as needed."}]},{"type":"paragraph","content":[{"type":"text","text":"6. Preview desktop and mobile before publishing."}]},{"type":"customHeading","content":[{"type":"text","text":"Price"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"$$19 one-time purchase."}]},{"type":"customHeading","content":[{"type":"text","text":"License"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Personal and single-business use. Redistribution or resale as a standalone component is not allowed."}]},{"type":"customHeading","content":[{"type":"text","text":"Refund note"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Because this is a digital code component, refunds are not available after access unless the component has a reproducible technical issue that cannot be fixed."}]}]},"introduction":"polished SaaS pricing component","slug":"planproof","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f8837-2e49-7088-8665-93d95fe87370.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":892,"height":741}}],"post":null,"createdAt":"2026-07-22T05:05:53.939Z","updatedAt":"2026-07-22T05:05:53.939Z","publishedAt":"2026-07-22T05:05:53.935Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://pioneering-notes-819287.framer.app/","price":"19","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/01d24324-78df-49e0-989c-dc6d74c89f84","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"BybCWuz96GsGw4naOyJ8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-22T05:05:54.269Z","updatedAt":"2026-07-22T05:05:54.269Z"},{"id":"019f823d-c0c2-712f-add6-ce866c4c96eb","title":null,"body":"

Just shipped AnswerVault for Framer: a searchable, crawlable FAQ system with category filters, optional FAQPage schema, direct question links, Glass mode, and no distracting hover wobble.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just shipped AnswerVault for Framer: a searchable, crawlable FAQ system with category filters, optional FAQPage schema, direct question links, Glass mode, and no distracting hover wobble."}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"AsSDiBW89yb3sODWpVjX","resolved":true,"title":"AnswerVault","body":"$6a","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"What it includes"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Searchable FAQ items with match highlighting"}]},{"type":"paragraph","content":[{"type":"text","text":"- Auto-generated category filters"}]},{"type":"paragraph","content":[{"type":"text","text":"- Crawlable collapsed answers"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional FAQPage JSON-LD schema"}]},{"type":"paragraph","content":[{"type":"text","text":"- Direct hash links for specific questions"}]},{"type":"paragraph","content":[{"type":"text","text":"- Single-open or multi-open behavior"}]},{"type":"paragraph","content":[{"type":"text","text":"- Filled default SaaS/support example content"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional iOS-style glass effect"}]},{"type":"paragraph","content":[{"type":"text","text":"- Five press-only physical interaction presets with no hover wobble"}]},{"type":"paragraph","content":[{"type":"text","text":"- Static-renderer and Reduced Motion safe behavior"}]},{"type":"paragraph","content":[{"type":"text","text":"- Responsive layout and keyboard-visible focus states"}]},{"type":"customHeading","content":[{"type":"text","text":"Best for"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- SaaS pricing and support pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Framer templates"}]},{"type":"paragraph","content":[{"type":"text","text":"- Product landing pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Help centers and resource hubs"}]},{"type":"paragraph","content":[{"type":"text","text":"- Agencies shipping client FAQ sections"}]},{"type":"customHeading","content":[{"type":"text","text":"Why it feels premium"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Most FAQ sections stop at expand and collapse. AnswerVault handles the quiet production details that make a FAQ useful after launch: searchable answers, category filtering, crawlable collapsed content, optional structured data, direct links to individual questions, responsive layouts, token-friendly colors, and Framer Canvas safety."}]},{"type":"customHeading","content":[{"type":"text","text":"Usage"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"1. Add AnswerVault to a Framer page."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Edit FAQ Items in the Properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Toggle Search, Categories, SEO Schema, Glass, and Motion as needed."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Preview the page and test search, categories, and question links."}]},{"type":"customHeading","content":[{"type":"text","text":" Price"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"$$12 one-time purchase."}]},{"type":"customHeading","content":[{"type":"text","text":"License"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Personal and single-business use. Redistribution or resale as a standalone component is not allowed."}]},{"type":"customHeading","content":[{"type":"text","text":" Refund note"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Because this is a digital code component, refunds are not available after access unless the component has a reproducible technical issue that cannot be fixed."}]}]},"introduction":"polished FAQ system","slug":"answervault","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f823d-947c-741b-927d-998e36b815c2.png","metadata":{"tint":{"h":180,"s":53,"l":42},"width":1152,"height":910}}],"post":null,"createdAt":"2026-07-21T01:15:12.365Z","updatedAt":"2026-07-21T01:15:12.365Z","publishedAt":"2026-07-21T01:15:12.359Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://attractive-usability-782157.framer.app/","price":"12","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/ac0c44e8-b0cd-4e39-8cf9-4937f7899015","workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"4nrBldQarXxYOzn6L49m","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-21T01:15:12.962Z","updatedAt":"2026-07-21T01:15:12.962Z"},{"id":"019f793a-46fa-756c-91f1-701fdd0952c9","title":null,"body":"

Suggested one-line value: `Turn any Framer page into a polished campaign link builder with presets, validation, Glass mode, and copy-ready URLs.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Suggested one-line value: `Turn any Framer page into a polished campaign link builder with presets, validation, Glass mode, and copy-ready URLs."}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ZtvddIYctF9dtCNwIvJb","resolved":true,"title":"Campaign Link","body":"$6b","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"What it includes"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Destination URL validation and automatic HTTPS normalization"}]},{"type":"paragraph","content":[{"type":"text","text":"- Existing query parameter and URL hash preservation"}]},{"type":"paragraph","content":[{"type":"text","text":"- UTM source, medium, campaign, term, and content fields"}]},{"type":"paragraph","content":[{"type":"text","text":"- Up to five customizable channel presets"}]},{"type":"paragraph","content":[{"type":"text","text":"- Live generated URL and active parameter summary"}]},{"type":"paragraph","content":[{"type":"text","text":"- Copy, open, and clear actions"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional iOS-style glass effect"}]},{"type":"paragraph","content":[{"type":"text","text":"- Five press-only physical CTA presets with no hover wobble"}]},{"type":"paragraph","content":[{"type":"text","text":"- Static-renderer and Reduced Motion safe behavior"}]},{"type":"paragraph","content":[{"type":"text","text":"- Responsive layout and keyboard-visible focus states"}]},{"type":"customHeading","content":[{"type":"text","text":"Best for"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Marketing and growth resource pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- SaaS websites"}]},{"type":"paragraph","content":[{"type":"text","text":"- Creative and performance agencies"}]},{"type":"paragraph","content":[{"type":"text","text":"- Newsletter sites"}]},{"type":"paragraph","content":[{"type":"text","text":"- Free-tool and lead-magnet pages"}]},{"type":"customHeading","content":[{"type":"text","text":"Why it feels premium"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"CampaignLink handles the quiet edge cases that make a campaign tool trustworthy: invalid destinations, missing schemes, existing query strings, anchors, copy feedback, keyboard focus, responsive layout, and Framer Canvas safety. The owner configures it entirely from the Properties panel."}]},{"type":"customHeading","content":[{"type":"text","text":" Usage"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"1. Add CampaignLink to a Framer page."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Set the starter destination and channel presets."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Customize labels, colors, Glass mode, and motion."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Preview the page and create a test campaign URL."}]},{"type":"customHeading","content":[{"type":"text","text":" Price"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"$$9 one-time purchase."}]},{"type":"customHeading","content":[{"type":"text","text":" License"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Personal and single-business use. Redistribution or resale as a standalone component is not allowed."}]},{"type":"customHeading","content":[{"type":"text","text":" Refund note"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Because this is a digital component, refunds are not available after access unless the component has a reproducible technical issue that cannot be fixed."}]},{"type":"paragraph"}]},"introduction":"CampaignLink is a polished UTM URL","slug":"campaign-link","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f793a-17fa-73d9-861d-9b61f8eb2ba5.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1200,"height":693}}],"post":null,"createdAt":"2026-07-19T07:14:49.939Z","updatedAt":"2026-07-19T07:14:49.939Z","publishedAt":"2026-07-19T07:14:49.936Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://just-status-346045.framer.app/","price":"9","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/0a79db1e-d43d-4255-924e-cdb96c8cd17e","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"RmxGPmvN3rdHslvdQunI","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-19T07:14:50.234Z","updatedAt":"2026-07-19T07:14:50.234Z"},{"id":"019f746d-629c-75bb-bd61-152658c41029","title":null,"body":"

CommandPilot is a keyboard-friendly command palette for SaaS, documentation, and template sites. Add quick links, CTA actions, docs, pricing anchors, or support pages in one configurable Framer component!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CommandPilot is a keyboard-friendly command palette for SaaS, documentation, and template sites. Add quick links, CTA actions, docs, pricing anchors, or support pages in one configurable Framer component!"}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"KDStc3no3KyXQmOpTwVB","resolved":true,"title":"CommandPilot","body":"$6c","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"What it includes"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"- Cmd/Ctrl+K shortcut"}]},{"type":"paragraph","content":[{"type":"text","text":"- Searchable command list"}]},{"type":"paragraph","content":[{"type":"text","text":"- Arrow-key navigation"}]},{"type":"paragraph","content":[{"type":"text","text":"- Enter to open the selected command"}]},{"type":"paragraph","content":[{"type":"text","text":"- Escape and outside-click close"}]},{"type":"paragraph","content":[{"type":"text","text":"- Anchor, internal, and external URL support"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional new-tab behavior per command"}]},{"type":"paragraph","content":[{"type":"text","text":"- iOS-style glass effect toggle"}]},{"type":"paragraph","content":[{"type":"text","text":"- Static-renderer safe behavior for Framer Canvas and export"}]},{"type":"customHeading","content":[{"type":"text","text":"Best for"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- SaaS landing pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Documentation sites"}]},{"type":"paragraph","content":[{"type":"text","text":"- Product templates"}]},{"type":"paragraph","content":[{"type":"text","text":"- Resource hubs"}]},{"type":"paragraph","content":[{"type":"text","text":"- Portfolio sites with many sections"}]},{"type":"customHeading","content":[{"type":"text","text":" Why it feels premium"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"CommandPilot adds the kind of fast navigation users expect from polished software products, without asking the site owner to wire keyboard events, modal state, accessible list navigation, and link handling by hand."}]},{"type":"customHeading","content":[{"type":"text","text":" Usage"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"1. Add CommandPilot to your Framer project."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Edit the Items control with your pages, anchors, or URLs."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Set your Shortcut and Design options."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Preview the page and test Cmd+K or Ctrl+K."}]},{"type":"customHeading","content":[{"type":"text","text":"Price"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"$$10 one-time purchase."}]},{"type":"customHeading","content":[{"type":"text","text":" License"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Personal and single-business use. Redistribution or resale as a standalone component is not allowed."}]},{"type":"paragraph"}]},"introduction":"CommandPilot is a keyboard-friendl","slug":"commandpilot","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f746c-e7a8-7119-a19f-c9a77875cc7d.png","metadata":{"tint":{"h":240,"s":25,"l":13},"width":1185,"height":819}}],"post":null,"createdAt":"2026-07-18T08:52:33.249Z","updatedAt":"2026-07-18T08:52:33.249Z","publishedAt":"2026-07-18T08:52:33.246Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://happy-course-883918.framer.app/","price":"10","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/f8167128-9fc0-4716-ba63-f1dba938ddb5","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"JDgNO90vJIUEVKjqZItB","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-18T08:52:33.564Z","updatedAt":"2026-07-18T08:52:33.564Z"},{"id":"019f73bc-0097-704b-a28a-6be33d1b8b8f","title":null,"body":"

Fade Words Lite is live.

A free, lightweight word-by-word text reveal for Framer hero copy and section intros.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Fade Words Lite is live."}]},{"type":"paragraph","content":[{"type":"text","text":"A free, lightweight word-by-word text reveal for Framer hero copy and section intros."}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"XEzp0iinUKJ2QAxCa2FW","resolved":true,"title":"Fade Words Lite","body":"$6d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Make text arrive softly, without splitting layers by hand"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Fade Words Lite is a free Framer Code Component for simple word-by-word text reveals. Add your sentence, adjust the font and timing, and use it in hero sections, intros, product pages, and editorial moments where the copy should feel a little more alive."}]},{"type":"customHeading","content":[{"type":"text","text":"Why it is different"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Keeps the component intentionally light: one text field, Framer Font control, color, timing, distance, and replay."}]},{"type":"paragraph","content":[{"type":"text","text":"- Shows the finished text on Canvas so designing does not feel broken."}]},{"type":"paragraph","content":[{"type":"text","text":"- Respects reduced-motion settings and shows the full sentence without animation."}]},{"type":"paragraph","content":[{"type":"text","text":"- Uses one accessible sentence label while hiding the visual split words from screen readers."}]},{"type":"paragraph","content":[{"type":"text","text":"- Uses no external images, icons, or animation libraries."}]},{"type":"customHeading","content":[{"type":"text","text":"Key features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Word-by-word fade and upward reveal"}]},{"type":"paragraph","content":[{"type":"text","text":"- Framer Font and Color controls"}]},{"type":"paragraph","content":[{"type":"text","text":"- Adjustable speed, stagger, distance, and starting opacity"}]},{"type":"paragraph","content":[{"type":"text","text":"- Play once or repeat on viewport re-entry"}]},{"type":"paragraph","content":[{"type":"text","text":"- Canvas-safe editing state"}]},{"type":"paragraph","content":[{"type":"text","text":"- Reduced-motion support"}]},{"type":"customHeading","content":[{"type":"text","text":"Works well for"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Hero headings"}]},{"type":"paragraph","content":[{"type":"text","text":"- Section intros"}]},{"type":"paragraph","content":[{"type":"text","text":"- Product launch pages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Portfolio opening copy"}]},{"type":"paragraph","content":[{"type":"text","text":"- Short editorial statements"}]},{"type":"paragraph"}]},"introduction":"A free, accessible word-by-word te","slug":"fade-words-lite","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f73bb-cb60-72be-9c7d-0c89d86b1043.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1440,"height":900}}],"post":null,"createdAt":"2026-07-18T05:38:48.081Z","updatedAt":"2026-07-18T05:43:17.390Z","publishedAt":"2026-07-18T05:38:48.077Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/FadeWordsLite-duoBuL.js@iwSMjeIhQlrBHhYPrbqF","previewUrl":"https://placid-choices-222249.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"iwSMjeIhQlrBHhYPrbqF","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-18T05:38:48.599Z","updatedAt":"2026-07-18T05:38:48.599Z"},{"id":"019f6dc2-39ee-7411-ad16-4dd1442a279b","title":null,"body":"

PlanMatch is live.

Turn visitor needs into a clear, explainable plan recommendation—with accessible switches, shareable state, and optional Glass UI.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"PlanMatch is live."}]},{"type":"paragraph","content":[{"type":"text","text":"Turn visitor needs into a clear, explainable plan recommendation—with accessible switches, shareable state, and optional Glass UI."}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"xURktB3mrb1goeDMZzNP","resolved":true,"title":"PlanMatch","body":"$6e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Turn a crowded pricing page into a clear recommendation"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"PlanMatch lets visitors switch on the capabilities they need and immediately shows the closest plan, its price, and the reasons behind the match. It replaces hand-wired scoring logic with one responsive Framer Code Component."}]},{"type":"customHeading","content":[{"type":"text","text":"Why it is different"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Shows every need on one screen instead of forcing visitors through a long quiz."}]},{"type":"paragraph","content":[{"type":"text","text":"- Uses editable weights across two or three plans, so the recommendation logic stays visible and predictable."}]},{"type":"paragraph","content":[{"type":"text","text":"- Explains the match with the selected needs that best support the result."}]},{"type":"paragraph","content":[{"type":"text","text":"- Optionally syncs selections to one URL query parameter for shareable recommendations."}]},{"type":"paragraph","content":[{"type":"text","text":"- Uses semantic switch buttons, visible focus, 44px touch targets, live result announcements, and reduced-motion handling."}]},{"type":"paragraph","content":[{"type":"text","text":"- Includes optional "},{"type":"text","text":"Glass UI","marks":[{"type":"bold"}]},{"type":"text","text":" styling. Turn it off for a solid, neutral interface without losing any function."}]},{"type":"customHeading","content":[{"type":"text","text":"Works well for"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"- SaaS and AI product pricing"}]},{"type":"paragraph","content":[{"type":"text","text":"- Membership and subscription tiers"}]},{"type":"paragraph","content":[{"type":"text","text":"- Productized services"}]},{"type":"paragraph","content":[{"type":"text","text":"- Agency client projects with several packages"}]},{"type":"paragraph","content":[{"type":"text","text":"- Any offer where visitors ask “Which plan is for me?”"}]},{"type":"paragraph","content":[{"type":"text","text":"### Setup"}]},{"type":"paragraph","content":[{"type":"text","text":"1. Add two or three plans with names, prices, CTA labels, and links."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Add up to six needs."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Give each need a weight for Plan 1, Plan 2, and Plan 3."}]},{"type":"paragraph","content":[{"type":"text","text":"4. Preview the switches and adjust the weights until the recommendation matches your offer."}]},{"type":"paragraph","content":[{"type":"text","text":"5. Keep URL Sync on for shareable results, or turn it off for local-only state."}]},{"type":"customHeading","content":[{"type":"text","text":"Important"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"- PlanMatch recommends from the weights you configure; it does not provide financial, legal, or purchasing advice."}]},{"type":"paragraph","content":[{"type":"text","text":"- It does not process payments or calculate usage-based prices."}]},{"type":"paragraph","content":[{"type":"text","text":"- Use two or three plans and up to six needs in v1."}]},{"type":"paragraph","content":[{"type":"text","text":"- If no need is selected, Plan 2 is shown as the flexible starting point."}]},{"type":"customHeading","attrs":{"level":2}}]},"introduction":"Help visitors match their needs to","slug":"planmatch","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f6dc1-ed4f-777a-87b2-2acb8627fe8b.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1200,"height":894}}],"post":null,"createdAt":"2026-07-17T01:47:52.832Z","updatedAt":"2026-07-17T02:09:12.475Z","publishedAt":"2026-07-17T01:47:52.829Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://easy-startup-101782.framer.app/","price":"19","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/2cb2778a-6952-4b9b-af4f-6e979cb41b7a","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"kidRgBmHhR1lQmY9TvIt","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-17T01:47:53.198Z","updatedAt":"2026-07-17T01:47:53.198Z"},{"id":"019f6a58-eb22-736a-b408-6b9a2e029097","title":null,"body":"

StepFlow Native is now live.

A Framer component for building multi-step native forms with validation, progress, keyboard support, and responsive behavior.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"StepFlow Native is now live."}]},{"type":"paragraph","content":[{"type":"text","text":"A Framer component for building multi-step native forms with validation, progress, keyboard support, and responsive behavior."}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fwptT9I1GMjvgCyiRMvs","resolved":true,"title":"StepFlow Native","body":"$6f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Build a clearer form without replacing Framer Forms"}]},{"type":"paragraph","content":[{"type":"text","text":"StepFlow Native turns a long Framer Native Form into a focused step-by-step flow. Keep Framer's Email, Google Sheets, Webhook, spam-protection, and rate-limiting workflow while StepFlow handles navigation, progress, validation, focus, and motion."}]},{"type":"customHeading","content":[{"type":"text","text":"Two ways to start"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Starter Form:","marks":[{"type":"bold"}]},{"type":"text","text":" drop it inside a Native Form and get a ready-to-use three-step contact flow with no Frames to connect."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Connected Frames:","marks":[{"type":"bold"}]},{"type":"text","text":" connect 2–8 of your own Framer Frames when you want complete visual and content control."}]},{"type":"customHeading","content":[{"type":"text","text":" Why it is different"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Preserves every mounted step and its field values for one complete Native Form submission."}]},{"type":"paragraph","content":[{"type":"text","text":"- Requires no detach/unlink workflow and no DOM layer-naming convention."}]},{"type":"paragraph","content":[{"type":"text","text":"- Includes required-field blocking, invalid-field focus, keyboard-friendly navigation, and an "},{"type":"text","text":"aria-live","marks":[{"type":"code"}]},{"type":"text","text":" step announcement."}]},{"type":"paragraph","content":[{"type":"text","text":"- Supports bar, dots, or no progress indicator and fade, slide, or no motion."}]},{"type":"paragraph","content":[{"type":"text","text":"- Automatically removes nonessential motion when visitors prefer reduced motion."}]},{"type":"customHeading","content":[{"type":"text","text":"Works well for"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- Lead capture and quote requests"}]},{"type":"paragraph","content":[{"type":"text","text":"- Client intake and applications"}]},{"type":"paragraph","content":[{"type":"text","text":"- Onboarding and signup flows"}]},{"type":"paragraph","content":[{"type":"text","text":"- Surveys, bookings, and contact forms"}]},{"type":"customHeading","content":[{"type":"text","text":" Setup"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"1. Add a Framer Native Form and configure "},{"type":"text","text":"Send To","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Place StepFlow Native inside that Form."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Use the built-in Starter Form, or switch to Connected Frames and add 2–8 Frames to "},{"type":"text","text":"Steps","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"customHeading","content":[{"type":"text","text":" Important"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"- StepFlow Native manages the multi-step experience; Framer Native Form manages submission destinations and spam protection."}]},{"type":"paragraph","content":[{"type":"text","text":"- Configure Email, Google Sheets, or Webhook on the parent Native Form before publishing."}]},{"type":"paragraph","content":[{"type":"text","text":"- In Connected Frames mode, use native Framer form fields inside the connected Frames."}]},{"type":"paragraph"}]},"introduction":"urn native Framer Forms into acces","slug":"stepflow-native","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/019f6a56-e953-7351-aed4-0193c6ed5907.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1200,"height":1000}}],"post":null,"createdAt":"2026-07-16T09:53:59.793Z","updatedAt":"2026-07-16T10:03:10.507Z","publishedAt":"2026-07-16T09:53:59.788Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://divine-journey-606926.framer.app","price":"15","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/8ebc469d-715b-48f8-a4c0-69e8f37eda1b","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"esYHYpxOEXUXgtvdtwhG","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-16T09:54:00.098Z","updatedAt":"2026-07-16T09:54:00.098Z"},{"id":"019ef34c-45eb-7067-a9f7-42b7fd5a0deb","title":null,"body":"

"Hey guys! Just published 'SoftBounce', a sleek animated glass CTA button component. Perfect for adding a modern touch to your Framer sites. Check it out! ✨

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"\"Hey guys! Just published 'SoftBounce', a sleek animated glass CTA button component. Perfect for adding a modern touch to your Framer sites. Check it out! "},{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}}]}]},"author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mUvszLjhaZwBRKGKXRGE","resolved":true,"title":"SoftBounce","body":"$70","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"SoftBounce"}]},{"type":"paragraph","content":[{"type":"text","text":"SoftBounce is an animated glass-style CTA button kit for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"It is designed to make simple call-to-action buttons feel more tactile, playful, and premium without adding unnecessary visual clutter."}]},{"type":"paragraph","content":[{"type":"text","text":"This component includes 5 polished motion styles in one clean Framer component, making it easy to add interactive CTA moments to landing pages, portfolio sites, startup pages, product pages, and hero sections."}]},{"type":"customHeading","content":[{"type":"text","text":"What’s Included"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Jelly Bounce"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Magnetic Bounce"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bubble Bounce"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spring Pop"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rocket CTA"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Each motion style is designed to feel smooth, responsive, and lightweight. You can switch between variants directly from the Framer editor using property controls."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"5 animated CTA button styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern glass-style visual system"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth physics-based motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable text and link"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in icon options"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable icon position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Radius and padding controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas performance mode"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No code editing required"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"SoftBounce works well for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pricing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Newsletter CTAs"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Easy Customization"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"You can customize the button directly inside the Framer editor."}]},{"type":"paragraph","content":[{"type":"text","text":"Available controls include:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Button text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Link URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icon"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icon position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion variant"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fill style"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hue"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hide on mobile"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas performance mode"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"About This Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"This is a Framer code component, built with code and designed to be customized without editing code."}]},{"type":"paragraph","content":[{"type":"text","text":"You can adjust the text, colors, motion style, icon, radius, padding, and other options directly from the Framer editor using property controls."}]},{"type":"paragraph","content":[{"type":"text","text":"To keep the component stable and easy to update, unlinking is not supported. The original source code cannot be viewed or edited."}]},{"type":"paragraph","content":[{"type":"text","text":"When an update button appears next to the component, it means a newer version is available. Apply the update to keep the component running with the latest improvements and best performance."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Terms of Service","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://knokknokd.framer.website/terms","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Privacy Policy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://knokknokd.framer.website/privacy-policy","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://knokknokd.framer.website/refund-policy","target":"_blank"}}]}]}]},"introduction":"Animated glass CTA buttons","slug":"softbounce","author":{"framerUserId":"0dd86399-fd80-4a26-b21d-bae04f727184","name":"knokknokD","slug":"uukk-ll","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/g4fu4u7h","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0dd86399-fd80-4a26-b21d-bae04f727184/ghepa42x","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1134,"height":873}}],"post":null,"createdAt":"2026-06-23T07:05:22.632Z","updatedAt":"2026-07-01T12:30:49.076Z","publishedAt":"2026-06-23T07:05:22.629Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://super-neptune-242691.framer.app/home","price":"3","paymentUrl":"https://knokknok1997.lemonsqueezy.com/checkout/buy/cca932da-a04a-4ace-83ee-8d84f71054f7?logo=0","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"baF2IQMlMThyhLknOjGQ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-23T07:05:22.667Z","updatedAt":"2026-06-23T07:05:22.667Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L71"}]