5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T9db,

Scroll Services 3D Section — a scroll-driven 3D cube showcase section for Framer.

Turn your services, work or process list into a rotating 3D scroll animation. Two synchronised cubes cross-rotate as the visitor scrolls: text cards roll forward while imagery counter-rotates, sharing one vanishing point for a clean seam. Drop it on the page no extra code needed.

SCROLL ANIMATION

Scroll-driven 3D cube rotation with sticky pinning
Cross-rotate (counter-rotation) toggle
Spring stiffness & damping for smooth or snappy motion
Adjustable scroll length per card to control pacing
Progress dots indicator
Respects reduced-motion; static canvas preview

CONTENT

Unlimited items number, title, label/value rows, image
Auto-numbering (01, 02, 03…) with visibility toggle
Optional CTA face with label, image, background
Built-in intro section: eyebrow, heading, paragraph
Built-in bottom CTA section: heading and text
Both sections toggle on/off use only the cube if you want

LAYOUT & STYLE

Card size, gap, max width, corner radius, perspective
Left or centre card text alignment
Full colour control: background, heading, muted text, cards, accent
Black & white image toggle
Optional crop-mark detailing for an editorial look
Custom font control
Gradient fallback backgrounds when no image is set
Responsive with clamp-based typography and spacing

GREAT FOR

Agency services sections, portfolio and case-study showcases, product feature walkthroughs, process and steps sections, studio landing pages and dark-theme hero sections.

KEYWORDS

scroll, scroll animation, 3d scroll, scroll section, sticky scroll, services section, showcase, portfolio, case study, 3d cube, gallery, cards, agency, studio, process, steps, features, CTA, parallax, editorial, responsive

NEED HELP?

Questions about installing or customizing this component or looking for custom Framer development?

Email nirav.jivani6@gmail.com. I usually reply within 24 hours.

Thank you.

5a:[["$","$L5d",null,{"post":{"id":"019fa2a0-de55-711d-9e04-36b64139c99c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6b8a7295-7cf5-4068-97c4-9e73f8dd2a5a","name":"Nirav Jivani","slug":"nirav-jivani","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/748434/avatar-ezVWo89tgH3kXj8m4DfCMnfUlNlRfG.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"dYxJhSpXf91qUabCgmuS","resolved":true,"title":"Scroll Services 3D","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll Services 3D Section — a scroll-driven 3D cube showcase section for Framer.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Turn your services, work or process list into a rotating 3D scroll animation. Two synchronised cubes cross-rotate as the visitor scrolls: text cards roll forward while imagery counter-rotates, sharing one vanishing point for a clean seam. Drop it on the page no extra code needed."}]},{"type":"paragraph","content":[{"type":"text","text":"SCROLL ANIMATION","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven 3D cube rotation with sticky pinning"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cross-rotate (counter-rotation) toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spring stiffness & damping for smooth or snappy motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable scroll length per card to control pacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Progress dots indicator"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Respects reduced-motion; static canvas preview"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"CONTENT","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Unlimited items number, title, label/value rows, image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto-numbering (01, 02, 03…) with visibility toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional CTA face with label, image, background"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in intro section: eyebrow, heading, paragraph"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in bottom CTA section: heading and text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Both sections toggle on/off use only the cube if you want"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"LAYOUT & STYLE","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card size, gap, max width, corner radius, perspective"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Left or centre card text alignment"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full colour control: background, heading, muted text, cards, accent"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Black & white image toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional crop-mark detailing for an editorial look"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom font control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gradient fallback backgrounds when no image is set"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive with clamp-based typography and spacing"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"GREAT FOR","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Agency services sections, portfolio and case-study showcases, product feature walkthroughs, process and steps sections, studio landing pages and dark-theme hero sections."}]},{"type":"paragraph","content":[{"type":"text","text":"KEYWORDS","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"scroll, scroll animation, 3d scroll, scroll section, sticky scroll, services section, showcase, portfolio, case study, 3d cube, gallery, cards, agency, studio, process, steps, features, CTA, parallax, editorial, responsive"}]},{"type":"paragraph","content":[{"type":"text","text":"NEED HELP?","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Questions about installing or customizing this component or looking for custom Framer development? "}]},{"type":"paragraph","content":[{"type":"text","text":"Email "},{"type":"text","text":"nirav.jivani6@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:nirav.jivani6@gmail.com","target":"_blank"}}]},{"type":"text","text":". I usually reply within 24 hours."}]},{"type":"paragraph","content":[{"type":"text","text":"Thank you."}]}]},"introduction":"A scroll driven 3D cube showcase","slug":"scroll-services-3d","author":{"framerUserId":"6b8a7295-7cf5-4068-97c4-9e73f8dd2a5a","name":"Nirav Jivani","slug":"nirav-jivani","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/748434/avatar-ezVWo89tgH3kXj8m4DfCMnfUlNlRfG.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/6b8a7295-7cf5-4068-97c4-9e73f8dd2a5a/019fa2a0-c3d5-77fb-8413-4fb8101627b2.png","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-27T08:11:18.947Z","updatedAt":"2026-07-27T13:38:14.666Z","publishedAt":"2026-07-27T08:11:18.939Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scrollservices3dsection.framer.website","price":"10","paymentUrl":"https://contra.com/payment-link/6WasAGrl-scroll-services-3-d-section","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"72ve5r2CFwFHBnXxpeF1","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-27T08:11:19.509Z","updatedAt":"2026-07-27T08:11:19.509Z","reported":false}}],"$L5f"]

Suggested for you