5d: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"] 5e:T864,

BoldStart is a high-impact Framer template built for digital agencies, marketing studios, branding firms, and creative freelancers who want a bold, modern online presence that converts visitors into clients.

Modern, Bold Design A striking hero section, animated headline reveals, and a confident visual identity that helps agencies stand out instead of blending in.

Fully Responsive Every section — hero, services, projects, pricing, team, and blog — adapts smoothly across desktop, tablet, and mobile devices.

CMS Compatible Projects, blog posts, and team members are powered by Framer's CMS, so you can add, edit, or remove content without touching design layouts.

SEO Optimized Clean semantic structure, optimized meta titles/descriptions, and fast-loading assets help your site rank and get discovered.

Accessibility Friendly Readable typography, sufficient color contrast, and structured navigation make the template usable for a wider range of visitors.

Performance Focused Lightweight animations and optimized images keep load times fast without sacrificing visual impact.

Multi-Page Structure Includes Home, About, Projects, Blog, and Contact pages — ready to launch a complete agency site out of the box.

Built-In Sections Include:

Hero with animated intro
Growth stats & metrics
Services / expertise grid
Portfolio / project showcase
Client testimonials
Pricing plans
Team member grid
Blog & insights
Contact form with budget selector
Newsletter signup footer

No-Code Editing Built entirely in Framer — customize colors, fonts, images, and content visually, no coding required.

Perfect for agencies, consultants, marketing teams, and freelance studios looking to launch a professional, conversion-ready website in minutes.

5f:T8b0,

A polished, fully customizable date-range picker for Framer — perfect for bookings, reservations, rentals, event registrations, or any project needing a "check-in / check-out" style date selector.

Key features:

Clean popover calendar with smooth open/close animation
Select a start and end date with visual range highlighting
Show 1, 2, or 3 months at once, or auto-adjust based on space
Built-in month & year dropdowns for jumping to far-off dates in one click
Block off unavailable dates (already-booked days) — visible with a strikethrough but not selectable
Set minimum and maximum selectable dates
Choose whether a range can skip over unavailable dates or must snap back automatically
Built-in validation with a custom error message, plus optional helper text
Choose the submitted date format (ISO, US, EU, or long-form)
Supports different locales and calendar labeling systems (Gregorian, Buddhist, Japanese, etc.)
Use it standalone, or wire it to Framer Variables for full control
Every color, font, radius, and spacing detail is stylable — no code required
Fully responsive and touch-friendly

Works seamlessly with Framer's native Forms — no custom code needed. Drop it in, name your fields, and it submits alongside the rest of your form data automatically.

Whether you're building a hotel booking site, car rental page, event signup, or appointment scheduler, this component gives you a beautiful, production-ready date-range field in seconds.

So here's all you do:

Drag the component inside your Framer Form, just like any other field.
Name the fields — in the settings panel, set "Start Field Name" and "End Field Name" (e.g. check_in and check_out).
Done. When someone picks their dates and hits Submit, both dates travel with the rest of the form data.

60:T908,

Most date pickers force a calendar popup — clunky on mobile, hard to style, overkill for simple fields like date of birth or checkout. Date Input Field does it differently: three independent, typed segments — Month, Day, Year — that feel like a native app input.

Built for real forms Plugs into Framer's Native Form — no extra setup. Set a Field Name and it posts a clean value to your inbox, like a built-in field.

Real calendar math Every date accepted actually exists. Leap years calculate correctly, and impossible dates like February 30th can't be typed — the day segment clamps live as you type.

Keyboard-first

Type a digit, field auto-advances
Arrow keys move between segments
Backspace on empty segment jumps back
Click a segment to auto-select

Min/Max dates that constrain input Set a min and max date, and the component restricts what's typeable live — not just on submit. Great for bookings that can't be past-dated, or 18+ registrations. Allow Past / Allow Future toggles handle "today" automatically.

Three formats, one source of truth MM/DD/YYYY, DD/MM/YYYY, or YYYY-MM-DD. Internally stored as clean ISO, so your data stays consistent.

States that make sense Default, Focus, Error, Success — independently colorable, plus Disabled and Read Only. Validation fires only after the user leaves the field, never mid-typing.

Fully styleable, zero code Font, colors, border, radius, padding — all property controls. Match your design system in seconds.

What you get:

Independent Month/Day/Year segments
Leap-year and month-length validation
Live Min/Max range enforcement
Allow Past / Allow Future toggles
3 date formats, leading-zero toggle
Required, Disabled, Read Only states
Accessible error messaging
Full Native Form compatibility, fully responsive

If your form needs a date, this gets a clean, validated field in under a minute — no calendar widget required.

61:T87c,

File Upload Box

A drag-and-drop / click-to-browse file upload field that drops straight into Framer's native Form component. Visitors can browse or drag a file in, watch it upload with a live progress bar, and the resulting file URL is automatically written into a hidden field so it's included with the rest of your form submission — no extra setup needed.

Where your files go

You choose the upload destination in the property panel:

Uploadcare (recommended for real projects) — Files are uploaded directly to your own Uploadcare account using your Public API Key. Every file that comes through the form will show up in your Uploadcare dashboard, where you can view, manage, download, or delete them at any time.

To set this up, grab your Public Key from your Uploadcare project and paste it into the Upload → Public Key field in the property panel. If your account was created after September 4, 2025, also add your CDN Subdomain (found under Project Settings → Delivery) so file links resolve correctly.

tmpfiles.org (public demo host) — A quick way to test the component without setting up an account. Files are sent to the free public service tmpfiles.org and are automatically deleted after about 1 hour. This is meant for prototyping only — don't use it for real visitor submissions or sensitive files, since nothing is stored permanently and anyone with the link can access the file during that hour.

Other features

Optional required-field validation tied into Framer's form submit
Multiple file support
File type and max size restrictions
Fully customizable colors, border style, fonts, and icons to match your design

62:T4d7,

A 3D image carousel for Framer where thumbnails orbit along a true elliptical path, viewed from an elevated, tilted camera angle so it reads as a rotating gallery in space. The ring auto-rotates slowly and tilts gently as you move your mouse across it. Every thumbnail stays billboarded — always facing you, never skewed — even while swinging around the ellipse.

Hovering any thumbnail clones it and flies the clone to the center of the stage while scaling it up, giving a smooth "pop and enlarge" preview without disturbing the ring itself, which keeps spinning underneath.

How to use it:

Drag the component onto your canvas and resize it to fill your section.
Open Images and add your photo list (defaults to 48 placeholders if left empty).
Adjust Radius X / Radius Z and Camera Tilt to shape the ellipse and viewing angle.
Set Thumb Width/Height, Rotation Speed, Mouse Sensitivity, and Hover Scale.
Match your site with Corner Radius and Background.

63:T73e,

MagicRings is a WebGL-powered background effect that renders a set of glowing, pulsing rings expanding outward from the center, each fading in and out on a loop. It uses a custom GLSL shader (via Three.js) for smooth, GPU-accelerated animation with a two-color gradient across the rings, subtle noise/grain, and optional mouse-reactive movement.

How to use it:

Drag the MagicRings layer onto your canvas and resize it to fill the area you want the effect in (a hero section, card background, etc.) — the layer needs a defined width and height to render.
In the property panel, set Color and Color Two to control the gradient across the rings.
Adjust Ring Count, Base Radius, Radius Step, and Ring Gap to change how many rings appear and how they're spaced.
Use Speed and Scale Rate to control how fast the rings expand and loop.
Tune Line Thickness, Attenuation, and Noise Amount to change the glow's sharpness and texture.
Toggle Follow Mouse to make the rings shift with cursor movement (adjust Mouse Influence and Parallax for intensity), and set Hover Scale for a scale-up effect on hover.
Enable Click Burst to trigger a brief burst/scale pulse when the layer is clicked.
Use Opacity, Blur, and Rotation as final styling touches, and layer it behind text or UI elements using Framer's layer order for a glowing backdrop effect.

5c:["$","$L5d",null,{"value":{"fallback":{"$inf$activity-creator-515a92b5-aa38-489d-bed7-d5b7cf38b118-all:/unified/creator/515a92b5-aa38-489d-bed7-d5b7cf38b118/activity/":[{"data":[{"id":"01a0ba65-5a00-73c1-b7af-b922d8f05885","type":"template.created","target":{"type":"template","id":"73423","preview":"BoldStart","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0ba64-6bfb-722e-baf5-a2c8ca679f25.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","slug":"deckle","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-09-19T15:59:59.488Z","latestAt":"2026-09-19T15:59:59.488Z"},{"id":"01a0ba07-1828-731d-a598-095b375462d0","type":"comment.reply","target":{"type":"post","id":"01a0b4fb-7d14-72e7-9543-e09cbc5dead8","preview":"Ink Bleed Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0b4fb-4e1d-71ae-aa62-29c58386b7b0.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0b4fb-7d14-72e7-9543-e09cbc5dead8","like":{"count":1,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0ba07-180e-733f-a420-05414d8c2d87","preview":"Thanks @PixlForm®","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks "},{"type":"mention","attrs":{"id":"d7b633f0-85d0-4e75-b61f-08c45984e34b","slug":"pixl-form","label":"PixlForm®","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0b4fb-7d14-72e7-9543-e09cbc5dead8","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0b99c-cbfa-73a0-aee4-39995c556b2f"},"repost":null}},"actors":[{"id":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","slug":"deckle","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-19T14:17:02.248Z","latestAt":"2026-09-19T14:17:02.248Z"},{"id":"01a0b4fb-7f7f-765d-85e7-2c349be8bcea","type":"component.created","target":{"type":"component","id":"zcepEud8HNCPa5bhuyke","preview":"Ink Bleed Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0b4fb-4e1d-71ae-aa62-29c58386b7b0.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","slug":"deckle","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-18T14:46:16.191Z","latestAt":"2026-09-18T14:46:16.191Z"},{"id":"01a0aea1-9cc3-7407-a20c-662b47abb5c9","type":"component.created","target":{"type":"component","id":"a1cU5edljUc10ET9cFHq","preview":"Range Calendar Pro","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0ae9e-fb82-7500-bffe-a6da1d658483.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","slug":"deckle","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-17T09:10:22.147Z","latestAt":"2026-09-17T09:10:22.147Z"},{"id":"01a0abb7-e1e3-77ba-94a0-7e8146115c4f","type":"component.created","target":{"type":"component","id":"NgtAIZAlte6LiIMYAcpI","preview":"Date Input Field","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0abb7-72d6-77ff-bbcb-33ab2217f17b.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","slug":"deckle","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-16T19:35:49.987Z","latestAt":"2026-09-16T19:35:49.987Z"},{"id":"019f70ad-e9bc-709b-b614-4563d3ebc003","type":"component.created","target":{"type":"component","id":"UjgNvfxpZuFKU8xHJPLH","preview":"File Upload Box","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/019f70ad-b563-73fe-85f4-cb93ad72ceee.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","slug":"deckle","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-17T15:24:33.596Z","latestAt":"2026-07-17T15:24:33.596Z"},{"id":"019f663f-d946-7553-88b9-6c0a8bd94bee","type":"component.created","target":{"type":"component","id":"IyS5lnlaFuWVTkXcMV0B","preview":"Ring Image Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/019f663e-b011-77ad-acf8-5c111dddfe6b.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","slug":"deckle","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-15T14:48:08.262Z","latestAt":"2026-07-15T14:48:08.262Z"},{"id":"019f65ae-94b4-751b-9b22-290f90908607","type":"component.created","target":{"type":"component","id":"8lMgBEJGGmkos3si5UeE","preview":"Glowing Magic Rings","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/019f65ad-6bb7-768d-9de7-f60a5859c7d3.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","slug":"deckle","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-15T12:09:27.988Z","latestAt":"2026-07-15T12:09:27.988Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:515a92b5-aa38-489d-bed7-d5b7cf38b118:/unified/posts/?creator=515a92b5-aa38-489d-bed7-d5b7cf38b118&with=reposts":[{"data":[{"id":"01a0ba65-57ed-738c-a6ac-f3e40382fbf5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[],"resources":[{"id":"73423","resolved":true,"title":"BoldStart","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"BoldStart","marks":[{"type":"bold"}]},{"type":"text","text":" is a high-impact Framer template built for digital agencies, marketing studios, branding firms, and creative freelancers who want a bold, modern online presence that converts visitors into clients."}]},{"type":"paragraph","content":[{"type":"text","text":"Modern, Bold Design","marks":[{"type":"bold"}]},{"type":"text","text":" A striking hero section, animated headline reveals, and a confident visual identity that helps agencies stand out instead of blending in."}]},{"type":"paragraph","content":[{"type":"text","text":"Fully Responsive","marks":[{"type":"bold"}]},{"type":"text","text":" Every section — hero, services, projects, pricing, team, and blog — adapts smoothly across desktop, tablet, and mobile devices."}]},{"type":"paragraph","content":[{"type":"text","text":"CMS Compatible","marks":[{"type":"bold"}]},{"type":"text","text":" Projects, blog posts, and team members are powered by Framer's CMS, so you can add, edit, or remove content without touching design layouts."}]},{"type":"paragraph","content":[{"type":"text","text":"SEO Optimized","marks":[{"type":"bold"}]},{"type":"text","text":" Clean semantic structure, optimized meta titles/descriptions, and fast-loading assets help your site rank and get discovered."}]},{"type":"paragraph","content":[{"type":"text","text":"Accessibility Friendly","marks":[{"type":"bold"}]},{"type":"text","text":" Readable typography, sufficient color contrast, and structured navigation make the template usable for a wider range of visitors."}]},{"type":"paragraph","content":[{"type":"text","text":"Performance Focused","marks":[{"type":"bold"}]},{"type":"text","text":" Lightweight animations and optimized images keep load times fast without sacrificing visual impact."}]},{"type":"paragraph","content":[{"type":"text","text":"Multi-Page Structure","marks":[{"type":"bold"}]},{"type":"text","text":" Includes Home, About, Projects, Blog, and Contact pages — ready to launch a complete agency site out of the box."}]},{"type":"paragraph","content":[{"type":"text","text":"Built-In Sections Include:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero with animated intro"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Growth stats & metrics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Services / expertise grid"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio / project showcase"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Client testimonials"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pricing plans"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Team member grid"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blog & insights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contact form with budget selector"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Newsletter signup footer"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"No-Code Editing","marks":[{"type":"bold"}]},{"type":"text","text":" Built entirely in Framer — customize colors, fonts, images, and content visually, no coding required."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for agencies, consultants, marketing teams, and freelance studios looking to launch a professional, conversion-ready website in minutes."}]}]},"introduction":"Digital Agency","slug":"boldstart","author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0ba64-6bfb-722e-baf5-a2c8ca679f25.png","metadata":{"tint":{"h":0,"s":0,"l":33},"width":1920,"height":1440}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0ba64-8ae0-77db-9fe6-30d832b43cf9.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1920,"height":1440}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0ba64-9f98-7788-8a18-231982a445a9.png","metadata":{"tint":{"h":0,"s":0,"l":33},"width":1920,"height":1440}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0ba64-b5f6-7058-a517-80fb05e93143.png","metadata":{"tint":{"h":0,"s":0,"l":33},"width":1920,"height":1440}}],"post":null,"createdAt":"2026-09-19T15:59:58.367Z","updatedAt":"2026-09-19T15:59:58.367Z","publishedAt":"2026-09-19T15:59:58.365Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"99","paymentUrl":"https://contra.com/payment-link/gOnikU6A-bold-start-digital-agency","remixUrl":null,"previewUrl":"https://boldstart.framer.website/","categories":[{"id":3,"name":"Agency","slug":"agency"},{"id":188,"name":"Art & Design","slug":"art-and-design"},{"id":276,"name":"Digital","slug":"digital"},{"id":282,"name":"Blogs","slug":"blogs"}],"styles":[{"id":110,"name":"Animated","slug":"animated"},{"id":193,"name":"Black & White","slug":"black-and-white"},{"id":201,"name":"Colorful","slug":"colorful"},{"id":222,"name":"Grid","slug":"grid"}],"mainCategory":{"id":3,"name":"Agency","slug":"agency"},"features":[{"id":9,"name":"Overlays & Modals","slug":"overlays-modals"},{"id":13,"name":"Slideshows/Tickers","slug":"slideshows-tickers"},{"id":18,"name":"Scroll Effects","slug":"scroll-effects"},{"id":21,"name":"CMS","slug":"cms"},{"id":30,"name":"Forms","slug":"forms"},{"id":32,"name":"Layout Templates","slug":"layout-templates"},{"id":35,"name":"Text Effects","slug":"text-effects"},{"id":37,"name":"Code Components","slug":"code-components"}],"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-19T15:59:58.957Z","updatedAt":"2026-09-19T15:59:58.957Z"},{"id":"01a0b4fb-7d14-72e7-9543-e09cbc5dead8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[],"resources":[{"id":"zcepEud8HNCPa5bhuyke","resolved":true,"title":"Ink Bleed Text","body":"

Text appears the way ink soaks into paper — starting as a soft, blurred blot and pulling into sharp focus as it "absorbs." Built with an animated SVG turbulence filter (no SMIL), so it's smooth and lightweight. Multi-line text staggers line by line, like handwriting settling in. Fully customizable: trigger on page load or scroll (with 6 scroll-trigger positions), optional replay, adjustable duration, line stagger timing, and bleed intensity. Great for editorial headlines, poetic intros, or any moment that deserves a slow, tactile reveal instead of a generic fade-in.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Text appears the way ink soaks into paper — starting as a soft, blurred blot and pulling into sharp focus as it \"absorbs.\" Built with an animated SVG turbulence filter (no SMIL), so it's smooth and lightweight. Multi-line text staggers line by line, like handwriting settling in. Fully customizable: trigger on page load or scroll (with 6 scroll-trigger positions), optional replay, adjustable duration, line stagger timing, and bleed intensity. Great for editorial headlines, poetic intros, or any moment that deserves a slow, tactile reveal instead of a generic fade-in."}]}]},"introduction":"Text that reveals like ink","slug":"ink-bleed-text","author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0b4fb-4e1d-71ae-aa62-29c58386b7b0.png","metadata":{"tint":{"h":0,"s":0,"l":14},"width":1920,"height":1440}}],"post":null,"createdAt":"2026-09-18T14:46:14.942Z","updatedAt":"2026-09-18T14:50:39.031Z","publishedAt":"2026-09-18T14:46:14.932Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://ink-bleed.framer.website/","price":"10","paymentUrl":"https://contra.com/payment-link/1AQdhGUC-ink-bleed-text-reveal","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"rZDGtuX4ynp5hlzldyDz","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-18T14:46:15.572Z","updatedAt":"2026-09-18T14:46:15.572Z"},{"id":"01a0aea1-98ae-712a-91f5-2ca1b755d259","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[],"resources":[{"id":"a1cU5edljUc10ET9cFHq","resolved":true,"title":"Range Calendar Pro","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A polished, fully customizable date-range picker for Framer — perfect for bookings, reservations, rentals, event registrations, or any project needing a \"check-in / check-out\" style date selector."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clean popover calendar with smooth open/close animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select a start and end date with visual range highlighting"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Show 1, 2, or 3 months at once, or auto-adjust based on space"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in month & year dropdowns for jumping to far-off dates in one click"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Block off unavailable dates (already-booked days) — visible with a strikethrough but not selectable"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set minimum and maximum selectable dates"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose whether a range can skip over unavailable dates or must snap back automatically"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in validation with a custom error message, plus optional helper text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose the submitted date format (ISO, US, EU, or long-form)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Supports different locales and calendar labeling systems (Gregorian, Buddhist, Japanese, etc.)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use it standalone, or wire it to Framer Variables for full control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Every color, font, radius, and spacing detail is stylable — no code required"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive and touch-friendly"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Works seamlessly with Framer's native Forms","marks":[{"type":"bold"}]},{"type":"text","text":" — no custom code needed. Drop it in, name your fields, and it submits alongside the rest of your form data automatically."}]},{"type":"paragraph","content":[{"type":"text","text":"Whether you're building a hotel booking site, car rental page, event signup, or appointment scheduler, this component gives you a beautiful, production-ready date-range field in seconds."}]},{"type":"customHeading","content":[{"type":"text","text":"So here's all you do:"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag the component inside your Framer Form","marks":[{"type":"bold"}]},{"type":"text","text":", just like any other field."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Name the fields","marks":[{"type":"bold"}]},{"type":"text","text":" — in the settings panel, set \"Start Field Name\" and \"End Field Name\" (e.g. "},{"type":"text","text":"check_in","marks":[{"type":"code"}]},{"type":"text","text":" and "},{"type":"text","text":"check_out","marks":[{"type":"code"}]},{"type":"text","text":")."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Done.","marks":[{"type":"bold"}]},{"type":"text","text":" When someone picks their dates and hits Submit, both dates travel with the rest of the form data."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Sleek date-range picker for forms","slug":"range-calendar-pro","author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0ae9e-fb82-7500-bffe-a6da1d658483.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1920,"height":1440}}],"post":null,"createdAt":"2026-09-17T09:10:19.160Z","updatedAt":"2026-09-17T09:10:19.160Z","publishedAt":"2026-09-17T09:10:19.144Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rangecalendarpro.framer.website/","price":"15","paymentUrl":"https://contra.com/payment-link/GeExBIeT-range-calendar-pro","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"2agZ874BZIKdF0NrpMUY","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-17T09:10:21.102Z","updatedAt":"2026-09-17T09:10:21.102Z"},{"id":"01a0abb7-dfa5-70fd-9aaa-e1863203e643","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[],"resources":[{"id":"NgtAIZAlte6LiIMYAcpI","resolved":true,"title":"Date Input Field","body":"$60","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Most date pickers force a calendar popup — clunky on mobile, hard to style, overkill for simple fields like date of birth or checkout. Date Input Field does it differently: three independent, typed segments — Month, Day, Year — that feel like a native app input."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for real forms","marks":[{"type":"bold"}]},{"type":"text","text":" Plugs into Framer's Native Form — no extra setup. Set a Field Name and it posts a clean value to your inbox, like a built-in field."}]},{"type":"paragraph","content":[{"type":"text","text":"Real calendar math","marks":[{"type":"bold"}]},{"type":"text","text":" Every date accepted actually exists. Leap years calculate correctly, and impossible dates like February 30th can't be typed — the day segment clamps live as you type."}]},{"type":"paragraph","content":[{"type":"text","text":"Keyboard-first","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Type a digit, field auto-advances"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrow keys move between segments"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Backspace on empty segment jumps back"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click a segment to auto-select"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Min/Max dates that constrain input","marks":[{"type":"bold"}]},{"type":"text","text":" Set a min and max date, and the component restricts what's typeable live — not just on submit. Great for bookings that can't be past-dated, or 18+ registrations. Allow Past / Allow Future toggles handle \"today\" automatically."}]},{"type":"paragraph","content":[{"type":"text","text":"Three formats, one source of truth","marks":[{"type":"bold"}]},{"type":"text","text":" MM/DD/YYYY, DD/MM/YYYY, or YYYY-MM-DD. Internally stored as clean ISO, so your data stays consistent."}]},{"type":"paragraph","content":[{"type":"text","text":"States that make sense","marks":[{"type":"bold"}]},{"type":"text","text":" Default, Focus, Error, Success — independently colorable, plus Disabled and Read Only. Validation fires only after the user leaves the field, never mid-typing."}]},{"type":"paragraph","content":[{"type":"text","text":"Fully styleable, zero code","marks":[{"type":"bold"}]},{"type":"text","text":" Font, colors, border, radius, padding — all property controls. Match your design system in seconds."}]},{"type":"paragraph","content":[{"type":"text","text":"What you get:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent Month/Day/Year segments"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Leap-year and month-length validation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live Min/Max range enforcement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Allow Past / Allow Future toggles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3 date formats, leading-zero toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Required, Disabled, Read Only states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible error messaging"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full Native Form compatibility, fully responsive"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"If your form needs a date, this gets a clean, validated field in under a minute — no calendar widget required."}]}]},"introduction":"No calendar. Just type the date","slug":"date-input-field","author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/01a0abb7-72d6-77ff-bbcb-33ab2217f17b.png","metadata":{"tint":{"h":255,"s":31,"l":30},"width":1920,"height":1440}}],"post":null,"createdAt":"2026-09-16T19:35:48.825Z","updatedAt":"2026-09-16T19:35:48.825Z","publishedAt":"2026-09-16T19:35:48.823Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dateinput.framer.website/","price":"12","paymentUrl":"https://contra.com/payment-link/stJPMsxq-date-input-field","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"jxggRXn6im4bUiBsq6tT","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-16T19:35:49.413Z","updatedAt":"2026-09-16T19:35:49.413Z"},{"id":"019f70ad-e876-7131-9165-ad1643fbc25d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[],"resources":[{"id":"UjgNvfxpZuFKU8xHJPLH","resolved":true,"title":"File Upload Box","body":"$61","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"File Upload Box","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A drag-and-drop / click-to-browse file upload field that drops straight into Framer's native Form component. Visitors can browse or drag a file in, watch it upload with a live progress bar, and the resulting file URL is automatically written into a hidden field so it's included with the rest of your form submission — no extra setup needed."}]},{"type":"paragraph","content":[{"type":"text","text":"Where your files go","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"You choose the upload destination in the property panel:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Uploadcare (recommended for real projects)","marks":[{"type":"bold"}]},{"type":"text","text":" — Files are uploaded directly to your own Uploadcare account using your "},{"type":"text","text":"Public API Key","marks":[{"type":"bold"}]},{"type":"text","text":". Every file that comes through the form will show up in your "},{"type":"text","text":"Uploadcare dashboard","marks":[{"type":"bold"}]},{"type":"text","text":", where you can view, manage, download, or delete them at any time."}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"To set this up, grab your Public Key from your Uploadcare project and paste it into the "},{"type":"text","text":"Upload → Public Key","marks":[{"type":"bold"}]},{"type":"text","text":" field in the property panel. If your account was created after September 4, 2025, also add your "},{"type":"text","text":"CDN Subdomain","marks":[{"type":"bold"}]},{"type":"text","text":" (found under Project Settings → Delivery) so file links resolve correctly."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"tmpfiles.org","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://tmpfiles.org","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" (public demo host)","marks":[{"type":"bold"}]},{"type":"text","text":" — A quick way to test the component without setting up an account. Files are sent to the free public service "},{"type":"text","text":"tmpfiles.org","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://tmpfiles.org","target":"_blank"}}]},{"type":"text","text":" and are "},{"type":"text","text":"automatically deleted after about 1 hour","marks":[{"type":"bold"}]},{"type":"text","text":". This is meant for prototyping only — don't use it for real visitor submissions or sensitive files, since nothing is stored permanently and anyone with the link can access the file during that hour."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Other features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional required-field validation tied into Framer's form submit"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple file support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"File type and max size restrictions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable colors, border style, fonts, and icons to match your design"}]}]}]}]},"introduction":"Drag & drop uploads for Forms","slug":"file-upload-box","author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/019f70ad-b563-73fe-85f4-cb93ad72ceee.png","metadata":{"tint":{"h":30,"s":58,"l":51},"width":1920,"height":1440}}],"post":null,"createdAt":"2026-07-17T15:24:32.948Z","updatedAt":"2026-07-18T15:03:37.498Z","publishedAt":"2026-07-17T15:24:32.940Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://framerfileuploader.framer.website/","price":"10","paymentUrl":"https://contra.com/payment-link/cXcW90Oe-file-upload-box","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"7xyRCBEx1gYMebX3xtqc","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-17T15:24:33.270Z","updatedAt":"2026-07-17T15:24:33.270Z"},{"id":"019f663f-d823-776b-98e3-021a126c78cd","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[],"resources":[{"id":"IyS5lnlaFuWVTkXcMV0B","resolved":true,"title":"Ring Image Carousel","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A 3D image carousel for Framer where thumbnails orbit along a true elliptical path, viewed from an elevated, tilted camera angle so it reads as a rotating gallery in space. The ring auto-rotates slowly and tilts gently as you move your mouse across it. Every thumbnail stays billboarded — always facing you, never skewed — even while swinging around the ellipse."}]},{"type":"paragraph","content":[{"type":"text","text":"Hovering any thumbnail clones it and flies the clone to the center of the stage while scaling it up, giving a smooth \"pop and enlarge\" preview without disturbing the ring itself, which keeps spinning underneath."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use it:","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag the component onto your canvas and resize it to fill your section."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open "},{"type":"text","text":"Images","marks":[{"type":"bold"}]},{"type":"text","text":" and add your photo list (defaults to 48 placeholders if left empty)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust "},{"type":"text","text":"Radius X / Radius Z","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Camera Tilt","marks":[{"type":"bold"}]},{"type":"text","text":" to shape the ellipse and viewing angle."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set "},{"type":"text","text":"Thumb Width/Height","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Rotation Speed","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Mouse Sensitivity","marks":[{"type":"bold"}]},{"type":"text","text":", and "},{"type":"text","text":"Hover Scale","marks":[{"type":"bold"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Match your site with "},{"type":"text","text":"Corner Radius","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Background","marks":[{"type":"bold"}]},{"type":"text","text":"."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Rotating gallery, zooms on hover","slug":"ring-image-carousel","author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/019f663e-b011-77ad-acf8-5c111dddfe6b.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1920,"height":1440}}],"post":null,"createdAt":"2026-07-15T14:48:07.437Z","updatedAt":"2026-07-15T15:12:08.104Z","publishedAt":"2026-07-15T14:48:07.435Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://3dimagering.framer.website/","price":"15","paymentUrl":"https://contra.com/payment-link/UjUTjUct-3-d-image-carousel","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"EtRCWbevUDqfKyxlpvsa","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-15T14:48:07.972Z","updatedAt":"2026-07-15T14:48:07.972Z"},{"id":"019f65ae-9354-71c9-8deb-f260f7671113","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[],"resources":[{"id":"8lMgBEJGGmkos3si5UeE","resolved":true,"title":"Glowing Magic Rings","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"MagicRings is a WebGL-powered background effect that renders a set of glowing, pulsing rings expanding outward from the center, each fading in and out on a loop. It uses a custom GLSL shader (via Three.js) for smooth, GPU-accelerated animation with a two-color gradient across the rings, subtle noise/grain, and optional mouse-reactive movement."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use it:","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag the "},{"type":"text","text":"MagicRings","marks":[{"type":"bold"}]},{"type":"text","text":" layer onto your canvas and resize it to fill the area you want the effect in (a hero section, card background, etc.) — the layer needs a defined width and height to render."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"In the property panel, set "},{"type":"text","text":"Color","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Color Two","marks":[{"type":"bold"}]},{"type":"text","text":" to control the gradient across the rings."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust "},{"type":"text","text":"Ring Count","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Base Radius","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Radius Step","marks":[{"type":"bold"}]},{"type":"text","text":", and "},{"type":"text","text":"Ring Gap","marks":[{"type":"bold"}]},{"type":"text","text":" to change how many rings appear and how they're spaced."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use "},{"type":"text","text":"Speed","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Scale Rate","marks":[{"type":"bold"}]},{"type":"text","text":" to control how fast the rings expand and loop."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tune "},{"type":"text","text":"Line Thickness","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Attenuation","marks":[{"type":"bold"}]},{"type":"text","text":", and "},{"type":"text","text":"Noise Amount","marks":[{"type":"bold"}]},{"type":"text","text":" to change the glow's sharpness and texture."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toggle "},{"type":"text","text":"Follow Mouse","marks":[{"type":"bold"}]},{"type":"text","text":" to make the rings shift with cursor movement (adjust "},{"type":"text","text":"Mouse Influence","marks":[{"type":"bold"}]},{"type":"text","text":" and "},{"type":"text","text":"Parallax","marks":[{"type":"bold"}]},{"type":"text","text":" for intensity), and set "},{"type":"text","text":"Hover Scale","marks":[{"type":"bold"}]},{"type":"text","text":" for a scale-up effect on hover."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enable "},{"type":"text","text":"Click Burst","marks":[{"type":"bold"}]},{"type":"text","text":" to trigger a brief burst/scale pulse when the layer is clicked."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use "},{"type":"text","text":"Opacity","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Blur","marks":[{"type":"bold"}]},{"type":"text","text":", and "},{"type":"text","text":"Rotation","marks":[{"type":"bold"}]},{"type":"text","text":" as final styling touches, and layer it "},{"type":"text","text":"behind","marks":[{"type":"italic"}]},{"type":"text","text":" text or UI elements using Framer's layer order for a glowing backdrop effect."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Glowing animated concentric rings","slug":"glowing-magic-rings","author":{"framerUserId":"515a92b5-aa38-489d-bed7-d5b7cf38b118","name":"Deckle","slug":"deckle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/xpejei38","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/515a92b5-aa38-489d-bed7-d5b7cf38b118/019f65ad-6bb7-768d-9de7-f60a5859c7d3.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1920,"height":1440}}],"post":null,"createdAt":"2026-07-15T12:09:26.800Z","updatedAt":"2026-07-15T12:58:48.079Z","publishedAt":"2026-07-15T12:09:26.785Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://magicrings.framer.ai/","price":"10","paymentUrl":"https://contra.com/payment-link/7T2Fg7L2-magic-rings","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"n9m6cwRbuuVGgG83mrBY","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-15T12:09:27.636Z","updatedAt":"2026-07-15T12:09:27.636Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L64"}]