56:I[473921,["/creators-assets/_next/static/immutable/chunks/36c08p67t0nml.js","/creators-assets/_next/static/immutable/chunks/3ayu63s3pbx5h.js","/creators-assets/_next/static/immutable/chunks/2qqxwi6m3n33t.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3k0o12ps7rnq6.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/271g_l-8c77ee.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/31xze_yiju0_q.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2gb4kwi-0_ftg.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mwzcaalgk6io.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/3wj273i6wglef.js","/creators-assets/_next/static/immutable/chunks/30ex342hi0wzr.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/222e_wk0i41rv.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/3pe6luvwzbwnz.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/33kea80yupbzt.js","/creators-assets/_next/static/immutable/chunks/3oj8b9u7wi0dw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3f2ccywlofkgw.js","/creators-assets/_next/static/immutable/chunks/1-gdi7ej49wy6.js","/creators-assets/_next/static/immutable/chunks/05yll7e_snxjv.js"],"PostDetailCard"] 57:T74f,

Halo Strip is a 3D ribbon of cards that turns slowly in space and spins when you grab it. It’s built in WebGL, so the motion stays smooth and the cards behave like real material: they lean, curl and flex as they pass through the twist in the band, then settle back as it slows.

FEELS PHYSICAL Drag sideways and the ribbon follows your hand, then keeps its momentum when you let go. Spin it hard and the cards skew and flare a little more. With a mouse, drag up or down to tilt the view, and it eases back on release. Left alone, it drifts at a calm, steady pace while the twist slowly shifts shape.

LIT, NOT FLAT Every card catches a soft key light, darkens as it turns away, and fades slightly into the background at the far side. A fine edge light picks out each card on dark backgrounds, and a soft floor glow sits under the ribbon. Cards on the far side stay readable, never mirrored.

MAKE IT YOURS • Up to 12 cards, repeated up to four times around the ring • Use your own images, or the six built-in cards: two original 3D renders, a moody light study and three type-led designs with editable text • Accent, background and floor glow colours • Twist, wave and flex strength, tilt, zoom, corner radius and gap • Auto-spin speed and direction, plus a start angle • A Scrub control that freezes the editor preview at any moment, so you can frame it on the canvas

BUILT TO BEHAVE The animation pauses when the component is off-screen or the tab is hidden, and all graphics resources are released when it’s removed. On phones, sideways swipes spin the ribbon while vertical swipes still scroll the page. It renders a proper still frame on the Framer canvas, and it scales to any size you give it.

Made for portfolios, product launches, studio showreels and landing pages that need one memorable moment above the fold.

53:[["$","$L56",null,{"post":{"id":"01a139cd-ce04-75b6-849d-a3b3eb7c128a","title":null,"body":"

Use Halo Strip in your next big project.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Use Halo Strip in your next big project."}]}]},"author":{"framerUserId":"29ef87c6-7130-4312-ac0b-e05b305c9c22","name":"Chiranjeev Singh","slug":"runicdevs","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/29ef87c6-7130-4312-ac0b-e05b305c9c22/z35oxdm8","followed":false,"followsYou":false},"media":[],"resources":[{"id":"hlJfaayK1QcUHQp2C9yB","resolved":true,"title":"Halo Strip","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Halo Strip is a 3D ribbon of cards that turns slowly in space and spins when you grab it. It’s built in WebGL, so the motion stays smooth and the cards behave like real material: they lean, curl and flex as they pass through the twist in the band, then settle back as it slows."}]},{"type":"paragraph","content":[{"type":"text","text":"FEELS PHYSICAL Drag sideways and the ribbon follows your hand, then keeps its momentum when you let go. Spin it hard and the cards skew and flare a little more. With a mouse, drag up or down to tilt the view, and it eases back on release. Left alone, it drifts at a calm, steady pace while the twist slowly shifts shape."}]},{"type":"paragraph","content":[{"type":"text","text":"LIT, NOT FLAT Every card catches a soft key light, darkens as it turns away, and fades slightly into the background at the far side. A fine edge light picks out each card on dark backgrounds, and a soft floor glow sits under the ribbon. Cards on the far side stay readable, never mirrored."}]},{"type":"paragraph","content":[{"type":"text","text":"MAKE IT YOURS • Up to 12 cards, repeated up to four times around the ring • Use your own images, or the six built-in cards: two original 3D renders, a moody light study and three type-led designs with editable text • Accent, background and floor glow colours • Twist, wave and flex strength, tilt, zoom, corner radius and gap • Auto-spin speed and direction, plus a start angle • A Scrub control that freezes the editor preview at any moment, so you can frame it on the canvas"}]},{"type":"paragraph","content":[{"type":"text","text":"BUILT TO BEHAVE The animation pauses when the component is off-screen or the tab is hidden, and all graphics resources are released when it’s removed. On phones, sideways swipes spin the ribbon while vertical swipes still scroll the page. It renders a proper still frame on the Framer canvas, and it scales to any size you give it."}]},{"type":"paragraph","content":[{"type":"text","text":"Made for portfolios, product launches, studio showreels and landing pages that need one memorable moment above the fold."}]}]},"introduction":"Twisting 3D card ring with inertia","slug":"halo-strip","author":{"framerUserId":"29ef87c6-7130-4312-ac0b-e05b305c9c22","name":"Chiranjeev Singh","slug":"runicdevs","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/29ef87c6-7130-4312-ac0b-e05b305c9c22/z35oxdm8","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/29ef87c6-7130-4312-ac0b-e05b305c9c22/01a139cd-7f77-76b7-89b1-03cef60e9eab.jpg","metadata":{"tint":{"h":60,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-14T09:45:50.701Z","updatedAt":"2026-10-14T09:45:50.701Z","publishedAt":"2026-10-14T09:45:50.697Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://halostrip.framer.website","price":"8","paymentUrl":"https://contra.com/payment-link/jKk6l8EA-halo-strip-framer-component","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"L9S1IscJpOZv2Qw5GgIs","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-14T09:45:51.364Z","updatedAt":"2026-10-14T09:45:51.364Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you