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:T832,

Features

Smooth 60fps cursor-following pupil physics
Reactive heart-eye transition on clickable element hovers
Dynamic eyelid squint reacting to cursor distance
Hardware-accelerated Three.js WebGL rendering pipeline
Automatic stencil buffer masking for clean outlines
Viewport-aware rendering via IntersectionObserver
Seamless responsive scaling across desktop and mobile
Zero layout shifts with native Framer controls
Production-ready performance with full GPU resource cleanup
Drag-and-drop integration for any landing page or hero section

Customization Options

Overall mascot scale and layout dimensions
Independent eye positions, scales, and rotation angles
Customizable sclera, pupil, eyelid, stroke, and highlight colors
Reactive heart transformation color
Adjustable stroke outline width
Live editor preview toggle

How to Use

Drop the Cursor Eye Mascot onto your Framer canvas.
Position it over your character artwork, hero layout, or navigation bar.
Adjust the eye positions, tilt, and scales to align with your design.
Style the stroke, lid, and heart colors to match your brand palette.
Publish your site to delight visitors with real-time reactive gaze tracking.

Use Cases

Hero sections for SaaS and tech startups
Interactive mascot illustrations and brand characters
Playful 404 and empty state pages
Creative portfolio headers
Gamified landing pages and Web3 experiences
Interactive pricing table accents
Contact forms and feedback prompts
High-converting CTA sections
Children, education, and lifestyle web apps
Dark and light mode branded UI accents

5a:[["$","$L5d",null,{"post":{"id":"01a115e2-f70c-7290-b737-ea6095780f14","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"682fc11e-0644-4920-8b94-8b794b0ece9e","name":"Saadat Ali","slug":"saadat-ali-designsbysadat","avatar":"https://framerusercontent.com/avatars/users/682fc11e-0644-4920-8b94-8b794b0ece9e/OrcFwpGK4","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Fb8X2MzO8JgFn1nR9r7n","resolved":true,"title":"Cursor Eye Mascot","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth 60fps cursor-following pupil physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reactive heart-eye transition on clickable element hovers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic eyelid squint reacting to cursor distance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hardware-accelerated Three.js WebGL rendering pipeline"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic stencil buffer masking for clean outlines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Viewport-aware rendering via IntersectionObserver"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Seamless responsive scaling across desktop and mobile"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zero layout shifts with native Framer controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Production-ready performance with full GPU resource cleanup"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag-and-drop integration for any landing page or hero section"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Overall mascot scale and layout dimensions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent eye positions, scales, and rotation angles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable sclera, pupil, eyelid, stroke, and highlight colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reactive heart transformation color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable stroke outline width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live editor preview toggle"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use"}],"attrs":{"level":1}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the Cursor Eye Mascot onto your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Position it over your character artwork, hero layout, or navigation bar."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust the eye positions, tilt, and scales to align with your design."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Style the stroke, lid, and heart colors to match your brand palette."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish your site to delight visitors with real-time reactive gaze tracking."}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections for SaaS and tech startups"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive mascot illustrations and brand characters"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Playful 404 and empty state pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolio headers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gamified landing pages and Web3 experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive pricing table accents"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Contact forms and feedback prompts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-converting CTA sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Children, education, and lifestyle web apps"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark and light mode branded UI accents"}]}]}]}]},"introduction":"3D mascot that follows cursor","slug":"cursor-eye-mascot","author":{"framerUserId":"682fc11e-0644-4920-8b94-8b794b0ece9e","name":"Saadat Ali","slug":"saadat-ali-designsbysadat","avatar":"https://framerusercontent.com/avatars/users/682fc11e-0644-4920-8b94-8b794b0ece9e/OrcFwpGK4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/682fc11e-0644-4920-8b94-8b794b0ece9e/01a115e2-cae5-74f8-8dc9-8316cc94b385.webp","metadata":{"tint":{"h":0,"s":0,"l":57},"width":640,"height":480}}],"post":null,"createdAt":"2026-10-07T10:22:37.255Z","updatedAt":"2026-10-07T10:38:25.049Z","publishedAt":"2026-10-07T10:22:37.252Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://fabulous-position-871439.framer.app","price":"8","paymentUrl":"https://designsbysadat.lemonsqueezy.com/checkout/buy/2835aff7-5894-4a89-aa28-6c5be4ac4fc2","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"zw9whkMeoSwuH9zGapk8","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-10-07T10:22:38.348Z","updatedAt":"2026-10-07T10:22:38.348Z","reported":false}}],"$L5f"]

Suggested for you