62: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"] 63:T7e6,

D-Pad Menu is a gaming-controller-inspired radial navigation component featuring GSAP spring physics, a draggable analog-stick knob, and directional item highlighting. Perfect for creating immersive, interactive navigation in Framer.

Key architectural highlights:

GSAP Spring Physics: Leverages GSAP's elastic easing for buttery-smooth item reveals and a satisfying snap-back when the knob is released.
Analog Stick Mechanics: Features a draggable center knob that calculates real-time drag angles to directionally highlight and select radially positioned menu items.
Radial Item Positioning: Uses trigonometric calculations to dynamically distribute menu items in a perfect circle around the knob, adapting to any item count.
Audio Integration: Built-in sound triggers for open, close, tick, and select actions, adding a tactile auditory layer to every interaction.

Set up:

Drag the D-Pad Menu component into your Canvas.
Toggle Editor Mode to keep the menu expanded while you configure its properties.
Configure your Menu Items, adding labels, links, and selecting built-in or custom icons.
Choose a Position for the floating trigger (e.g., Bottom Right).
Upload your Sound Effects to enable immersive audio feedback (optional).
Tweak the Knob Color, Ring Color, and Item Background to match your brand.
Turn off Editor Mode and preview the drag interaction and spring animations!

After completing your purchase, you will receive a link to the component. Copy the URL and paste it into your Framer project to import it.

Enjoy!

64:Tef5,

Scribble Hover Reveal isn't just a hover effect; it's a meticulously crafted animation sequence that bridges the gap between static design and hand-drawn illustration. By leveraging optimized SVG path transitions, it creates a "live sketch" feel that commands attention and encourages interaction.

Key architectural highlights:

Micro-Interaction Staggering: Reveal text uses advanced delay logic for a cinematic, word-by-word reveal that feels intentional and premium.
Dual-Layer Depth: Features a base-stroke and a highlight-stroke overlap to create visual depth and a "trace and fill" aesthetic.

Features:

Hand-Drawn Aesthetic: Creates an organic, sketchy feel that breaks the monotony of standard web boxes.
Dynamic Reveal: Text emerges from the bottom with a smooth, staggered translate animation.
Smart Truncation & Links: Add subtext with an optional "Read More" link. The component automatically handles truncation at 200 characters, perfect for adding links to detailed pages
Ultra-Fine Control: Full control over scribble thickness (initial vs final), colors, and drawing duration.
Layout Flexibility: Supports fixed dimensions for precise grid integration while maintaining object-fit integrity for background images.
Zero Performance Lag: Built on the Framer Motion core to ensure 60FPS animations even with complex SVG paths.

Customisation Options:

Visuals:

Image: Set any background image with perfect aspect ratio handling.
Colors: Independent controls for the primary Stroke Color and Base Stroke.
Typography: Fully adjustable typeface via Framer's native Font control (supports all Google Fonts).

Animation:

Duration: Drag the slider to speed up the drawing for a snappy feel or slow it down for an artistic, deliberate look.
Stroke Widths: Fine-tune the "ink" thickness using Initial Stroke Width (static) and Final Stroke Width (hover).

Layout:

Border Radius: Match your site's design system with precise corner rounding controls.

Set up:

Drag the Scribble Hover Reveal component into your Canvas.
Replace the Image with your own high-resolution asset.
Update the Reveal Text. It will automatically handle multi-line staggering.
Add Subtext & Link: Toggle the "Show Subtext" option to add your description and paste a "Read More URL" to link to another page.
Harmonize the Stroke Color with your brand's primary color palette.
Adjust the Final Stroke Width (typically 3x to 4x the initial width) to ensure the scribble feels impactful upon interaction.

After completing your purchase, you will receive a link to the component.

Copy the URL and paste it into your browser to import it.

65:Td80,

Orbit Preloader isn't just a loading screen, it's a cinematic entry point for your website. By combining concentric circular typography with sophisticated SVG path manipulation, it creates an immersive "breathing" effect that feels organic and premium.

Key architectural highlights:

Staggered Motion Waves: Implements complex delay logic to ensure rings ripple inward and outward in a synchronized, wave-like pattern.
Organic Randomization: Features randomized group rotation that subtly shifts the loader's orientation over time, preventing visual repetition.
Tabular-Num Precision: Uses specialized numeric formatting for the central counter to ensure rock-solid stability during rapid progression.

Features:

Concentric Breathing: 8 independent rings with distinct labels that stretch and contract for a rhythmic, alive feel.
Interactive Progress: Dynamic central counter with customizable prefix/suffix to track loading progression.
Premium Stagger Exit: Features a cinematic fade-out sequence where rings dissolve from the center out before the background clears.
Full Responsiveness: Smart scaling logic adjusts radii and font sizes across mobile, tablet, and desktop breakpoints.

Customisation Options:

Visuals:
- Background Color: Set the primary overlay color.
- Colors: Independent controls for Text Rings and the central Counter.
Content:
- Orbit Texts: Add up to 8 unique strings to populate the rings.
- Counter Labels: Customize the Prefix and Suffix (e.g., "Loading", "%").
Animation:
- Durations: Separate sliders for Counter Duration (speed of count) and Loader Duration (visibility time).
- Rotation: Control the intensity of the random orbit shifts via Rotation°.
Typography:
- Ring Font Size: Global control for orbit text scale.
- Counter Font: Native Framer Font picker for the central number.

Set up:

Copy and paste the Orbit Preloader component into your project.
Update the Orbit Texts array with your brand keywords or menu items.
Match the Background Color to your site's theme.
Adjust the Loader Duration to sync with your site's average initial load time.
Set the Counter Suffix to "%" or leave blank for a clean numeric look.

After completing your purchase, you will receive a link to the component. Copy the URL and paste it into project to import it.

66:T15ee,

Magnetic Float Nav reimagines site navigation as a floating, interactive object. It breaks free from the top bar convention by sitting anywhere on the canvas, snapping back to its origin with a satisfying spring physics feel, and expanding into a smooth reveal of your menu items - all without a single line of code.

Key architectural highlights:

Magnetic Snap Physics: Uses Framer Motion's spring-based drag constraints to create a satisfying "snap back to origin" behavior when the user releases the bar.
Responsive Scale Engine: A dedicated `mobileScale` multiplier ensures every dimension - bar height, button size, padding, font size, icon stroke - scales proportionally at any breakpoint.
Staggered Item Reveal: Each menu item animates in with an individually configurable delay, creating a fluid cascade effect that elevates the entire interaction.
Dashed Origin Indicator: A subtle dashed bounding box marks the bar's original position while it's being dragged, providing clear spatial feedback without cluttering the design.

Features:

Draggable & Snappable: Full drag support with optional snap-back to the original position within a configurable threshold radius.
Smooth Menu Reveal: Items expand outward from the button with a staggered, spring-based animation sequence.
Logo Area: Dedicated left-side zone supporting custom logo images (PNG/SVG) or a fallback text label.
Mobile-Aware Scaling: A single slider scales the entire component - every spacing, size, and font - proportionally for mobile screens.
Full Typography Control: Framer's native Font picker lets you set font family, size, weight, and letter spacing from the properties panel.
Non-Intrusive Origin Box: An optional dashed indicator shows where the bar "lives" when it's been dragged away.

Customisation Options:

Content:
- Logo Image: Upload your brand logo (PNG/SVG). Falls back to a clean "LOGO" text label when empty.
- Menu Items: Add, remove, and label links directly from the property panel - no code required.
Bar Style:
- Bar Color, Height, Padding: Full control over the pill's appearance.
- Corners: Unified border-radius slider for the bar and all menu item pills.
Link Style:
- Link BG & Font Color: Independent color pickers for menu item backgrounds and text.
- Spacing & Padding: Fine-tune the gap between items and horizontal padding inside each pill.
Typography:
- Font: Native Framer Font control supporting all Google Fonts - family, size, weight, and letter spacing in one panel.
Menu Button:
- Button Size, BG & Icon Color: Control the circular toggle button's diameter, fill, and hamburger/X icon color.
Animation:
- Reveal Time: Slider to set how long the menu opening animation takes.
- Stagger: Delay increment per menu item for the cascade reveal.
Interaction:
- Draggable Toggle: Enable or disable the floating drag behavior entirely.
- Snap Back: Toggle whether the bar returns to its origin on release.
- Snap Range: Set the distance threshold within which snap-back activates.
- Origin Box Color: Customize the dashed placeholder border color.
Mobile:
- Breakpoint: Set the screen width at which mobile scaling kicks in.
- Scale UI: A single multiplier (e.g. 0.75) shrinks all dimensions proportionally.
- Side Padding: Additional horizontal offset for the bar on mobile screens.

Set up:

Paste the Magnetic Float Nav component onto your Canvas.
Open the property panel and update Menu Items with your site's navigation links.
Upload your Logo Image or leave it blank for the text fallback.
Match Bar Color and Link Font Color to your brand's color palette.
Choose your Font using the native Framer Font picker.
Set your Mobile Breakpoint and Scale UI values to fine-tune the mobile experience.
Toggle Draggable on or off depending on whether you want the interactive floating behavior.

After completing your purchase, you will receive a link to the component.

Copy the URL and paste it into your Framer project to import it.

67:Tb16,

Add a touch of motion to your site with this spinning text component. Circular Text creates an engaging focal point that draws attention without overwhelming your design. Whether you need a rotating "Contact Us" stamp, a "Scroll Down" indicator, or just a decorative typographic element, it delivers smooth, performant animation with rich interactive capabilities.

Features

Continuous Rotation: Smooth infinite loop with customizable speed and direction.
Deep Interactivity: Choose from 5 distinct hover effects including "Speed Up", "Slow Down", "Pause", and the chaotic "Go Bonkers".
Precise Control: Independent controls for Text Circle Radius (visual spread) and Hit Area Size (interactive hit-area).
Typography Support: Full control over Font Size, Weight, and Letter Spacing.
Responsive-Readiness: Works seamlessly with Framer's layout tools.

Customisation Options

Content:
- Text: The message to display in the ring.
- Color: Fully customizable text color.
Geometry:
- Hit Area Size: Defines the interactive diameter for hover triggers.
- Text Circle Radius: Controls how far the text sits from the center.
- Direction: Spin Clockwise or Counter-Clockwise.
Typography:
- Font Size & Weight: standard text controls.
- Letter Spacing: Fine-tune the gap between characters.
Motion:
- Spin Duration: Set the speed of the rotation loop.
- Hover Effect: Select the interactive behavior on mouseover.

Set up

Drag the component onto your canvas.
Edit the Text property to your desired message.
Adjust Text Radius to set how wide the text ring should be.
Set the Circle Size to define the invisible hover area (usually slightly larger than your text ring).
Tweak Font Size and Letter Spacing until the reading rhythm is perfect.
Choose your Hover Effect and hit Preview!

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73-all:/unified/creator/bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73/activity/":[{"data":[{"id":"019fe141-13b0-729d-9964-c19da24c721c","type":"comment.reply","target":{"type":"post","id":"019c2c9d-5777-7c6f-918f-b600f3f30706","preview":"Circular Spin Text","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Lna1WxP4GMSYKb0JGRKC/circular-spin-text-sHSHqw3BDvfcXJuWkVSLkjTWwLO0wf","targetDeleted":false,"owned":true,"actions":{"postId":"019c2c9d-5777-7c6f-918f-b600f3f30706","like":{"count":116,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019fe141-1375-727d-97cf-1903050b94b4","preview":"Thanks a lot!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks a lot!","marks":[{"type":"bold"}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019c2c9d-5777-7c6f-918f-b600f3f30706","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019fcb01-8e26-743f-a750-abf0e144d0f4"},"repost":null}},"actors":[{"id":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","slug":"motioniq-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-08T12:02:46.320Z","latestAt":"2026-08-08T12:02:46.320Z"},{"id":"019f4b65-5141-76b9-bcb6-432f7e66ad0f","type":"component.liked","target":{"type":"component","id":"8dNQXaWP6plkPqTFgbec","preview":"Magnet Side Navbar","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/94772ad7-baad-4763-bd35-365704374dc3/019f4b46-d43d-70f9-b755-0ef745c5cb63.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","slug":"motioniq-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-10T09:39:18.972Z","latestAt":"2026-07-10T09:39:18.972Z"},{"id":"019f02c3-c813-756b-a5f9-4405b0cb9772","type":"component.created","target":{"type":"component","id":"iiqoOLkia7ejaC4nDyQD","preview":"D-Pad Menu","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73/0x4ffg41","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","slug":"motioniq-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-26T07:10:13.011Z","latestAt":"2026-06-26T07:10:13.011Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73:/unified/posts/?creator=bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73&with=reposts":[{"data":[{"id":"019f4b61-8a73-7710-b6d5-f87101182b85","title":null,"body":"

Built a Scribble Hover Reveal for Framer

I wanted to move away from the typical opacity and scale hover effects, so I experimented with a hand-drawn scribble reveal that feels a bit more playful.

Link in the comments.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Built a Scribble Hover Reveal for Framer ","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"I wanted to move away from the typical opacity and scale hover effects, so I experimented with a hand-drawn scribble reveal that feels a bit more playful."}]},{"type":"paragraph","content":[{"type":"text","text":"Link in the comments.","marks":[{"type":"bold"}]}]},{"type":"paragraph"}]},"author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[{"type":"video","url":"https://stream.mux.com/e7bta002A26KcRWPMgjQiZ7JQfFD4vN3DuRxzMWB00ErQ.m3u8","metadata":{"posterUrl":"https://image.mux.com/e7bta002A26KcRWPMgjQiZ7JQfFD4vN3DuRxzMWB00ErQ/thumbnail.webp?time=3.733","aspectRatio":"77:45","duration":7.966667}}],"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":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-10T09:35:11.479Z","updatedAt":"2026-07-10T09:35:11.479Z"},{"id":"019f02c3-c7dc-7068-b35d-5c4af4280e6b","title":null,"body":"

What if your website navigation felt like a PlayStation/Xbox controller? 🎮

That's exactly what D-Pad Menu does.

A fully customizable radial menu with GSAP-powered spring animations, draggable joystick controls, audio feedback, and responsive touch interactions.

Now available for Framer.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What if your website navigation felt like a PlayStation/Xbox controller? "},{"type":"emoji","attrs":{"name":"video_game","emoji":"🎮"}}]},{"type":"paragraph","content":[{"type":"text","text":"That's exactly what "},{"type":"text","text":"D-Pad Menu","marks":[{"type":"bold"}]},{"type":"text","text":" does."}]},{"type":"paragraph","content":[{"type":"text","text":"A fully customizable radial menu with GSAP-powered spring animations, draggable joystick controls, audio feedback, and responsive touch interactions."}]},{"type":"paragraph","content":[{"type":"text","text":"Now available for Framer."}]}]},"author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"iiqoOLkia7ejaC4nDyQD","resolved":true,"title":"D-Pad Menu","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"D-Pad Menu is a gaming-controller-inspired radial navigation component featuring GSAP spring physics, a draggable analog-stick knob, and directional item highlighting. Perfect for creating immersive, interactive navigation in Framer."}]},{"type":"customHeading","content":[{"type":"text","text":"Key architectural highlights:","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"GSAP Spring Physics:","marks":[{"type":"bold"}]},{"type":"text","text":" Leverages GSAP's elastic easing for buttery-smooth item reveals and a satisfying snap-back when the knob is released."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Analog Stick Mechanics:","marks":[{"type":"bold"}]},{"type":"text","text":" Features a draggable center knob that calculates real-time drag angles to directionally highlight and select radially positioned menu items."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Radial Item Positioning:","marks":[{"type":"bold"}]},{"type":"text","text":" Uses trigonometric calculations to dynamically distribute menu items in a perfect circle around the knob, adapting to any item count."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Audio Integration:","marks":[{"type":"bold"}]},{"type":"text","text":" Built-in sound triggers for open, close, tick, and select actions, adding a tactile auditory layer to every interaction. "}]},{"type":"paragraph"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Set up:","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag the "},{"type":"text","text":"D-Pad Menu","marks":[{"type":"bold"}]},{"type":"text","text":" component into your Canvas. "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toggle "},{"type":"text","text":"Editor Mode","marks":[{"type":"bold"}]},{"type":"text","text":" to keep the menu expanded while you configure its properties."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configure your "},{"type":"text","text":"Menu Items","marks":[{"type":"bold"}]},{"type":"text","text":", adding labels, links, and selecting built-in or custom icons. "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose a "},{"type":"text","text":"Position","marks":[{"type":"bold"}]},{"type":"text","text":" for the floating trigger (e.g., Bottom Right). "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your "},{"type":"text","text":"Sound Effects","marks":[{"type":"bold"}]},{"type":"text","text":" to enable immersive audio feedback (optional). "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tweak the "},{"type":"text","text":"Knob Color","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Ring Color","marks":[{"type":"bold"}]},{"type":"text","text":", and "},{"type":"text","text":"Item Background","marks":[{"type":"bold"}]},{"type":"text","text":" to match your brand. "}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn off "},{"type":"text","text":"Editor Mode","marks":[{"type":"bold"}]},{"type":"text","text":" and preview the drag interaction and spring animations! "}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"After completing your purchase, you will receive a link to the component. Copy the URL and paste it into your Framer project to import it. "}]},{"type":"paragraph","content":[{"type":"text","text":"Enjoy!"}]}]},"introduction":"Gaming-inspired radial navbar","slug":"d-pad-menu","author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73/0x4ffg41","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-26T07:10:12.784Z","updatedAt":"2026-06-29T08:03:35.062Z","publishedAt":"2026-06-26T07:10:12.781Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dpad-menu.framer.website/","price":"11","paymentUrl":"https://motioniq.gumroad.com/l/dpad-nav","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"fwZfZDePi9a6dhCvnYxY","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-06-29T08:14:29.003Z","createdAt":"2026-06-26T07:10:12.956Z","updatedAt":"2026-06-29T08:14:29.003Z"},{"id":"019e6d4b-d814-7687-9476-77f9b5e56990","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Eq8EuJ6xdUcTWzf6ZQfW","resolved":true,"title":"ScribbleHover Reveal","body":"$64","bodyJson":null,"introduction":"Hand-drawn scribble reveal on hover","slug":"scribblehover-reveal","author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Eq8EuJ6xdUcTWzf6ZQfW/scribblehover-reveal-T4nGNtJZF9PPLaHH7AYlAevtpOadpT","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-17T18:38:32.934Z","updatedAt":"2026-06-02T17:01:34.325Z","publishedAt":"2026-05-28T06:35:47.604Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scribble-hover-reveal-card.framer.website/","price":"10","paymentUrl":"https://motioniq.gumroad.com/l/scribble-hover-reveal-card-framer?wanted=true","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"BXniQjoiI6wWblFHmX4j","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-28T06:35:47.604Z","updatedAt":"2026-05-28T06:35:47.604Z"},{"id":"019c8a7c-408f-7762-a1d0-29002db1880e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"AodKouKOFILPOIo0Scds","resolved":true,"title":"Orbit Preloader","body":"$65","bodyJson":null,"introduction":"Circular animated text orbit preloader","slug":"orbit-preloader","author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/AodKouKOFILPOIo0Scds/orbit-preloader-rJM3g4VKvBmyFJOpPjLXDLM4wp7Zv2","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-17T09:37:15.867Z","updatedAt":"2026-02-26T04:15:19.765Z","publishedAt":"2026-02-23T12:32:04.751Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://orbit-loader.framer.website/","price":"5","paymentUrl":"https://motioniq.gumroad.com/l/orbit-preloader-framer","workshop":true,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"lPFmaRQzlcdKR3pRbVrd","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-23T12:32:04.751Z","updatedAt":"2026-02-23T12:32:04.751Z"},{"id":"019c7ef1-37bf-7034-b0d5-f39b0e6a6891","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"HHXm20Jwj2XIpXPVV7ns","resolved":true,"title":"Magnetic Float Nav","body":"$66","bodyJson":null,"introduction":"Draggable menu with physics snap.","slug":"magnetic-float-nav","author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/HHXm20Jwj2XIpXPVV7ns/magnetic-float-nav-Swoa3ZLdkxEj6zS790bixLz0uLmnSi","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-19T11:55:04.995Z","updatedAt":"2026-02-21T07:06:00.276Z","publishedAt":"2026-02-21T06:44:23.615Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://magneticfloatingnav.framer.website/","price":"9","paymentUrl":"https://motioniq.gumroad.com/l/magnetic-floating-nav-framer","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"3csTcmI04WH9wOOM9qco","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-21T06:44:23.615Z","updatedAt":"2026-02-21T06:44:23.615Z"},{"id":"019c2c9d-5777-7c6f-918f-b600f3f30706","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Lna1WxP4GMSYKb0JGRKC","resolved":true,"title":"Circular Spin Text","body":"$67","bodyJson":null,"introduction":"Interactive rotating text badge.","slug":"circular-spin-text","author":{"framerUserId":"bd4fcfcc-cd17-48ab-84eb-fc4b5c4bdf73","name":"MotionIQ Studio","slug":"motioniq-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1783213/avatar-YpzxVNM0ZgWlVRl5uJIuMjNeB19vg3.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Lna1WxP4GMSYKb0JGRKC/circular-spin-text-sHSHqw3BDvfcXJuWkVSLkjTWwLO0wf","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-23T09:39:13.277Z","updatedAt":"2026-02-21T06:54:35.974Z","publishedAt":"2026-02-05T07:03:54.999Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/CircularSpinText-YcSP8m.js@zvujDX1uMUME9lh0LUI0","previewUrl":"https://circular-spin-text.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"zvujDX1uMUME9lh0LUI0","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":116,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-05T07:03:54.999Z","updatedAt":"2026-02-05T07:03:54.999Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L68"}]