65:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.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/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.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/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/31t_i-sjkqwxc.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/31wecb1pe5ugs.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0mf-dfabvof5m.js","/creators-assets/_next/static/immutable/chunks/28zsl3gu7sgg3.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1hrrs8zq4ee_v.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/0kwdy8yc-c0ba.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 66:T492,

Text Spin is a customizable hover animation component that transforms static typography into smooth, character-by-character 3D motion.

On hover, each letter rotates independently along the Y-axis with fluid staggered timing, creating a polished flip effect that feels responsive, playful, and premium.

Use Text Spin for navigation links, buttons, headlines, CTAs, portfolio projects, landing pages, and any interaction where typography deserves more personality.

Customize the animation speed, use a solid text color, or create linear and radial gradients directly from the Framer property panel. For linear gradients, you can also control the gradient angle.

Features:

• Character-by-character 3D Y-axis rotation

• Smooth staggered hover animation

• Adjustable animation speed

• Custom text color

• Gradient radient support

• Works with existing text components

• Easy customization through Framer properties

• No manual keyframes or timeline setup

Create expressive typography interactions in seconds and give your Framer projects a more dynamic, tactile feel.

67:T4c9,

Description

This component adds an instant copy-to-clipboard button with a fully customizable animated popup for user feedback. Adjust padding, colors, radius, text, icons, offsets, and animation styles directly from the Properties panel. Choose between text-only, icon-only, or combined button modes and personalize the popup message, duration, and appearance.

Controls

Button padding
Icon upload + icon library support
Text / icon / combined content modes
Button fill, text color, icon color
Border radius
Copy text
Popup message text
Popup fill + text color
Popup animation style (fade, scale, or both)
Popup offsets (X and Y)
Popup duration
Font and icon sizing

How to Use

Add the component to your canvas, set your “Copy Text,” and customize the button style and popup appearance using the provided controls. Adjust the offset values to position the popup, and preview interactions directly in Framer. Drop it into any layout or reuse it as a reusable micro interaction across your project.

64:["$","$L65",null,{"value":{"fallback":{"$inf$activity-creator-b43c2726-2a62-47ca-aa3c-d0b20a5a407c-all:/unified/creator/b43c2726-2a62-47ca-aa3c-d0b20a5a407c/activity/":[{"data":[{"id":"019f4a82-e853-71db-b359-b5f2d446d16b","type":"creator.followed","target":{"type":"creator","id":"636ec006-cc7b-4548-abc4-188c80cae2ce","preview":"Bhumi","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/636ec006-cc7b-4548-abc4-188c80cae2ce/iw6py5rp","slug":"bhumi-katariya","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"b43c2726-2a62-47ca-aa3c-d0b20a5a407c","name":"Kunal Singh","avatar":null,"slug":"kunal-singh","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-10T05:32:00.976Z","latestAt":"2026-07-10T05:32:00.976Z"},{"id":"019f4267-664b-74cd-865b-7c43fd6dd5b0","type":"component.created","target":{"type":"component","id":"8J6xcYf9eXylFYjkLHCd","preview":"Spin Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b43c2726-2a62-47ca-aa3c-d0b20a5a407c/idmxfn33","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"b43c2726-2a62-47ca-aa3c-d0b20a5a407c","name":"Kunal Singh","avatar":null,"slug":"kunal-singh","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-08T15:45:00.491Z","latestAt":"2026-07-08T15:45:00.491Z"},{"id":"019ee908-6f7c-707a-8826-de100c5124ab","type":"creator.followed","target":{"type":"creator","id":"20b794d8-b712-479d-8572-13812d589ab6","preview":"Floyka Design Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/62848/avatar-FieFvLtWCfpmdsGVre1bpgGPZl1iGN.jpg","slug":"floyka","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"b43c2726-2a62-47ca-aa3c-d0b20a5a407c","name":"Kunal Singh","avatar":null,"slug":"kunal-singh","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-21T07:15:04.694Z","latestAt":"2026-06-21T07:15:04.694Z"},{"id":"019ee908-6c03-72ce-8641-9b9bdbeea698","type":"creator.followed","target":{"type":"creator","id":"dc3ee0eb-e751-47b8-9566-653448f30664","preview":"joniframe","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/dc3ee0eb-e751-47b8-9566-653448f30664/unak0wcq","slug":"joniframe","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"b43c2726-2a62-47ca-aa3c-d0b20a5a407c","name":"Kunal Singh","avatar":null,"slug":"kunal-singh","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-21T07:15:03.807Z","latestAt":"2026-06-21T07:15:03.807Z"},{"id":"019ee908-66d3-7562-8292-24cfcad81f38","type":"creator.followed","target":{"type":"creator","id":"b52ec26d-e0c3-4d1c-bddf-4dbf55338e4f","preview":"FrameBuild","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/238316/avatar-ELWQF8t3QI529f2aF3wSmDGBYHpPtI.jpg","slug":"framebuild","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"b43c2726-2a62-47ca-aa3c-d0b20a5a407c","name":"Kunal Singh","avatar":null,"slug":"kunal-singh","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-21T07:15:02.479Z","latestAt":"2026-06-21T07:15:02.479Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:b43c2726-2a62-47ca-aa3c-d0b20a5a407c:/unified/posts/?creator=b43c2726-2a62-47ca-aa3c-d0b20a5a407c&with=reposts":[{"data":[{"id":"019f4267-650a-7244-9a88-a207dbe18173","title":null,"body":"

Just launched Spin Text ✨

Make every letter come alive with smooth, character-by-character 3D animations. Trigger it on hover or click, customize the speed, colors, and gradients all directly in Framer.

Would love to see what you create with it! 🚀

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just launched "},{"type":"text","text":"Spin Text","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}}]},{"type":"paragraph","content":[{"type":"text","text":"Make every letter come alive with smooth, character-by-character 3D animations. Trigger it on hover or click, customize the speed, colors, and gradients all directly in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Would love to see what you create with it! "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]}]},"author":{"framerUserId":"b43c2726-2a62-47ca-aa3c-d0b20a5a407c","name":"Kunal Singh","slug":"kunal-singh","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"8J6xcYf9eXylFYjkLHCd","resolved":true,"title":"Spin Text","body":"$66","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Text Spin is a customizable hover animation component that transforms static typography into smooth, character-by-character 3D motion."}]},{"type":"paragraph","content":[{"type":"text","text":"On hover, each letter rotates independently along the Y-axis with fluid staggered timing, creating a polished flip effect that feels responsive, playful, and premium."}]},{"type":"paragraph","content":[{"type":"text","text":"Use Text Spin for navigation links, buttons, headlines, CTAs, portfolio projects, landing pages, and any interaction where typography deserves more personality."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize the animation speed, use a solid text color, or create linear and radial gradients directly from the Framer property panel. For linear gradients, you can also control the gradient angle."}]},{"type":"paragraph","content":[{"type":"text","text":"Features:"}]},{"type":"paragraph","content":[{"type":"text","text":"• Character-by-character 3D Y-axis rotation "}]},{"type":"paragraph","content":[{"type":"text","text":"• Smooth staggered hover animation "}]},{"type":"paragraph","content":[{"type":"text","text":"• Adjustable animation speed "}]},{"type":"paragraph","content":[{"type":"text","text":"• Custom text color "}]},{"type":"paragraph","content":[{"type":"text","text":"• Gradient radient support "}]},{"type":"paragraph","content":[{"type":"text","text":"• Works with existing text components "}]},{"type":"paragraph","content":[{"type":"text","text":"• Easy customization through Framer properties "}]},{"type":"paragraph","content":[{"type":"text","text":"• No manual keyframes or timeline setup"}]},{"type":"paragraph","content":[{"type":"text","text":"Create expressive typography interactions in seconds and give your Framer projects a more dynamic, tactile feel."}]}]},"introduction":"Make Every Letter Come Alive","slug":"spin-text","author":{"framerUserId":"b43c2726-2a62-47ca-aa3c-d0b20a5a407c","name":"Kunal Singh","slug":"kunal-singh","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b43c2726-2a62-47ca-aa3c-d0b20a5a407c/idmxfn33","metadata":{"tint":{"h":0,"s":0,"l":9},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-07-08T15:44:59.790Z","updatedAt":"2026-07-09T04:39:15.611Z","publishedAt":"2026-07-08T15:44:59.783Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://spintext.framer.website/","price":"5","paymentUrl":"https://kunal123.lemonsqueezy.com/checkout/buy/9f2d36b2-a3f8-4e95-9667-4da65b971fdd","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"xRyZSmF2RzSoiWore09E","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-07-08T15:45:00.170Z","updatedAt":"2026-07-08T15:45:00.170Z"},{"id":"019b45d5-ab57-7964-9712-10daaa1f8d3c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b43c2726-2a62-47ca-aa3c-d0b20a5a407c","name":"Kunal Singh","slug":"kunal-singh","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"yJNmmGViRoop31Jzc4eM","resolved":true,"title":"Copy Popup","body":"$67","bodyJson":null,"introduction":"","slug":"copy-popup","author":{"framerUserId":"b43c2726-2a62-47ca-aa3c-d0b20a5a407c","name":"Kunal Singh","slug":"kunal-singh","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/yJNmmGViRoop31Jzc4eM/copy-popup-UslOVEucodQlE8QbvssLXzxqsqX83a","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-13T09:10:17.287Z","updatedAt":"2025-12-22T09:15:14.709Z","publishedAt":"2025-12-22T11:33:09.591Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/CopyButtonWithPopup-RSM3.js@Ce1OcCJ76ZNuELhMK3VV","previewUrl":"https://clipboardcopy.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"Ce1OcCJ76ZNuELhMK3VV","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":"2025-12-22T11:33:09.591Z","updatedAt":"2025-12-22T11:33:09.591Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L68"}]