51:I[267044,["/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/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:T127c,

About this Component

Scroll Blur Reveal is a cinematic Framer code component that transforms plain text into a scroll-driven experience. Each word emerges from a soft blur — one by one — as the user scrolls down the page, creating the kind of editorial, high-end feel you see on award-winning creative sites. No layout shifts, no jumpiness, just pure smooth motion tied directly to scroll.

Drop it into any section and it works instantly. The component handles the entire animation logic — blur intensity, reveal timing, word staggering, and vertical drift — all driven by native framer-motion scroll tracking. With a transparent background, it floats seamlessly on top of whatever your page design already looks like.

Fully customizable from Framer's property panel — adjust font family, size, weight, color, blur strength, and reveal speed without writing a single line of code.

✨ Key Features

Scroll-Driven Word Reveal: Each word animates individually from blur to sharp as the user scrolls, using framer-motion's useScroll and useTransform for buttery-smooth physics.
Cinematic Blur Effect: Words start at a customizable blur radius and fade into focus with an easing curve that feels intentional and premium.
Zero Layout Shift: The sticky layout pattern keeps the text perfectly centered on screen while the scroll happens — nothing moves except the words revealing.
Transparent Background: No background color forced on you. The component sits cleanly over any section, image, or gradient you've already built.
Fully Responsive: Font size and padding scale automatically across desktop, tablet portrait, tablet landscape, and mobile — no breakpoint setup needed.
Reveal Speed Control: Dial the speed from meditative slow to snappy fast using a single property slider. Great for matching the energy of your brand.
10+ Property Controls: Every detail — text content, color, blur amount, font weight, line height, letter spacing, scroll height, and padding — is editable from the Framer panel.

⚙️ Setup

Create Code File: Copy the component code and paste it into a new code file in Framer named ScrollRevealText.tsx.
Add to Canvas: Drag the component onto your page — it defaults to a centered, full-section layout ready to use.
Set Your Text: Type your copy directly in the "Text" property field in the right panel. Any length works.
Choose Your Font: Enter any font family already loaded in your Framer project in the "Font Family" field.
Adjust Reveal Speed: Start at 0.65 for a smooth cinematic feel. Go lower for slower, go higher for snappier.
Set Scroll Height: Increase to 400vh or more if you want each word to have more breathing room per scroll distance.

💡 Tips

Slow = Premium: A reveal speed between 0.3 and 0.5 feels the most high-end. Fast reveals work better for short punchy headlines.
Pair with a Dark Section: The blur effect reads best on dark backgrounds. Set your page section to black or deep navy and use white text for maximum impact.
Short Lines Hit Harder: Write in short, punchy phrases — 8 to 12 words per thought. The reveal rhythm makes each word feel intentional.
Combine with a Hero: Place this component just below your hero fold as a mission statement or brand manifesto section for instant scroll engagement.

🔄 Refund Policy

Due to the digital nature of this component, refunds are generally not issued once access is granted. However, if the component is broken, has a bug, or fails to work as advertised and cannot be resolved through support, a refund can be requested directly through Contra. Please review the live demo before purchasing to ensure it fits your project needs.

💬 Questions & Support

Free lifetime updates included. Have a question or need help with implementation? Reach out via email at mrammarilyes@gmail.com or connect on LinkedIn.

53:Tfd4,

Pricing Switch Card is a high-performance Framer code component that packs three distinct plans into a single, space-saving interface. Designed to eliminate the "jumping" layout shifts common in standard pricing tables, it uses a unique expanding toggle that morphs to reveal premium options without moving a single pixel on the rest of your page.

Drop it into your pricing section and it works instantly. The component handles the logic for Free, Monthly, and Annual tiers, featuring a fluid "sub-pill" animation that feels like a native app. With smart benefit filtering and automatic annual savings badges, it’s built specifically to turn browsers into subscribers.

Fully customizable from Framer’s property panel—adjust every color, radius, and text element to match your brand without writing a single line of code.

✨ Key Features

Expanding "Nested" Switch: A custom-built toggle that smoothly expands from two states to three using physics-based transitions.
Zero Layout Shift: Employs unique TriText logic to cross-fade plan names, prices, and descriptions in place, keeping your design stable.
Smart Benefit Filtering: Choose to show "locked" features with a strikethrough or hide them entirely based on the active plan.
Annual Savings Badge: A high-visibility, scale-animated badge that automatically highlights value when the user selects the annual tier.
Interactive CTA Engine: Per-plan link support via the Framer Link picker and button styles (Filled vs. Outlined) that update instantly.
20+ Property Controls: Every visual detail—from the crown icon size to the card's inner padding—is editable via the Framer panel.
Fully Responsive: The card and switch scale fluidly to fit any container, from mobile stacks to wide desktop grids.

⚙️ Setup

Create Code File: Copy the component code and paste it into a new code file in Framer named PricingSwitchCard.tsx.
Add to Canvas: Drag the component onto your page—it defaults to a clean, professional layout.
Configure Benefits: Use the "✦ Benefits" array in the right panel to add your features and toggle their availability per plan.
Customize Style: Use the "📐 Switch" and "🎨 Card Style" sections to align the component with your brand's colors and radius.
Set Links: Click the Link picker for the Free, Monthly, and Annual sections to connect to your checkout or sign-up pages.

💡 Tips

Annual Upsell: Use the "Badge Text" property in the Annual Plan section to call out specific savings (e.g., "Save 33%") to drive higher LTV.
Icon Customization: Toggle the Crown icon on or off in the switch settings to distinguish your premium tiers.
Interactive Feedback: The component includes built-in hover states and tap highlights for a tactile, premium feel.

🔄 Refund Policy

All sales are final due to the nature of digital products. Please review the live demo before purchasing.

💬 Questions & Support

Free lifetime updates included. Have a question or need help with implementation? Reach out via email at mrammarilyes@gmail.com or connect on LinkedIn.

54:Tbcf,

Dino 404 is a fully playable Chrome-style dinosaur runner built as a Framer code component — turning your 404 page from a dead end into something visitors actually enjoy.

Drop it on your /404 page and it works instantly. The pixel-art T-rex runs, jumps over cacti, dodges birds, and tracks a high score — all drawn in real-time on HTML Canvas with no external libraries. Keyboard, click, and touch all supported out of the box.

Fully customizable from Framer's property panel — adjust the background, dino color, obstacle color, ground, score text, border, and hint text to match any brand without touching a single line of code.

✨ Key Features

Faithful Chrome T-rex pixel sprite with 2-frame run animation, jump pose, and death state
3 cactus obstacle variants — single tall, double, and triple small
Flying birds that appear after 300 points for increasing difficulty
Speed escalates every 500 points (capped at 12×) — no end, just harder
Session high score saved in sessionStorage — no backend needed
Space bar, Arrow Up, click, and touch all trigger jump
Dark and light mode ready — one color swap in the panel
9 property controls — every visual element editable from the Framer panel
Zero dependencies — only imports from framer and react
Fully responsive — canvas scales fluidly from 320px mobile to 4K

⚙️ Setup

Copy the component and paste it into a new code file in Framer (Assets → Code → "+")
Go to Pages → "+" and set the URL slug to exactly 404
Drag Dino404Game onto the page — set Width and Height to Fill
Select the component and customise colors from the right panel

No configuration required. It starts in idle state and begins playing on the first Space press or tap.

💡 Tips

Light mode: Set Background to #f5f5f5 and Dino/Obstacles to #212121 — the eye cutout auto-adapts
Test in Preview: Click events fire in Framer Preview (Cmd+P), not on the canvas editor
Pair with text components: Use Dino404Headline, Dino404Message, and Dino404BackLink from the companion file for a fully editable, independently positionable 404 layout

🔄 Refund Policy

All sales are final due to the nature of digital products. Please review the demo before purchasing.

💬 Questions & Support

Free lifetime updates included. Have a question or issue? Reach out via email mrammarilyes@gmail.com or Linkedin

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07-all:/unified/creator/d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07/activity/":[{"data":[{"id":"019f03d8-16b9-724d-8ded-44714b2629d0","type":"creator.followed","target":{"type":"creator","id":"eff58e40-71eb-450e-b0c5-9a9dd83ebf8b","preview":"Kyne J.","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/444767/avatar-zcT6lOT6JHpfegSa0Bz3aYdOCPGMOy.jpg","slug":"kyne-design","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07","name":"Ilyes Ammar","avatar":"https://framerusercontent.com/avatars/users/d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07/jzoSL2jw4","slug":"ilyes-ammar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-26T12:12:01.051Z","latestAt":"2026-06-26T12:12:01.051Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07:/unified/posts/?creator=d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07&with=reposts":[{"data":[{"id":"019e4f57-4616-7d22-b1bf-926441c61047","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07","name":"Ilyes Ammar","slug":"ilyes-ammar","avatar":"https://framerusercontent.com/avatars/users/d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07/jzoSL2jw4","followed":false,"followsYou":false},"media":[],"resources":[{"id":"uVyteeGDtYFaZgybtPOE","resolved":true,"title":"FogType","body":"$52","bodyJson":null,"introduction":"Scroll Blur Reveal — Word by Word","slug":"fogtype","author":{"framerUserId":"d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07","name":"Ilyes Ammar","slug":"ilyes-ammar","avatar":"https://framerusercontent.com/avatars/users/d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07/jzoSL2jw4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/uVyteeGDtYFaZgybtPOE/fogtype-KmEJhgla6UNPjkTPRpkN50YTWj1Xud","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-10T12:32:36.207Z","updatedAt":"2026-05-19T09:20:58.779Z","publishedAt":"2026-05-22T10:59:40.182Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scrollblurreveal.framer.website/","price":"5","paymentUrl":"https://contra.com/payment-link/PzfFTpv6-scroll-blur-reveal-word-by-word","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"lZYaYe1yuCJKj1wu4F1s","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-22T10:59:40.182Z","updatedAt":"2026-05-22T10:59:40.182Z"},{"id":"019dd343-bb00-79cf-aec3-0338ec70d16a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07","name":"Ilyes Ammar","slug":"ilyes-ammar","avatar":"https://framerusercontent.com/avatars/users/d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07/jzoSL2jw4","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fISWpmM9bkplMVecqFQx","resolved":true,"title":"Pricing Switch Card","body":"$53","bodyJson":null,"introduction":"3 plans, 1 card, zero layout jumping.","slug":"pricing-switch-card","author":{"framerUserId":"d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07","name":"Ilyes Ammar","slug":"ilyes-ammar","avatar":"https://framerusercontent.com/avatars/users/d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07/jzoSL2jw4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/fISWpmM9bkplMVecqFQx/pricing-switch-card-74pYsvxCKtLnKlRykNfrD1JVJMnrEe","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-21T13:14:40.573Z","updatedAt":"2026-05-03T09:16:37.098Z","publishedAt":"2026-04-28T08:45:24.608Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://pricingswitchcard.framer.website","price":"5","paymentUrl":"https://contra.com/payment-link/QcG6wqOT-pricing-switch-car","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"1b67vqdgD3cjBdiw7pYP","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-04-28T08:45:24.608Z","updatedAt":"2026-04-28T08:45:24.608Z"},{"id":"019d6d1e-ed86-7255-a4a2-7adbdb9dcb2c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07","name":"Ilyes Ammar","slug":"ilyes-ammar","avatar":"https://framerusercontent.com/avatars/users/d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07/jzoSL2jw4","followed":false,"followsYou":false},"media":[],"resources":[{"id":"2kuZo551lfSypYqDgxEH","resolved":true,"title":"404 Dinosaur Game","body":"$54","bodyJson":null,"introduction":"Dino 404 — Interactive Game Page","slug":"404-dinosaur-game","author":{"framerUserId":"d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07","name":"Ilyes Ammar","slug":"ilyes-ammar","avatar":"https://framerusercontent.com/avatars/users/d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07/jzoSL2jw4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/2kuZo551lfSypYqDgxEH/404-dinosaur-game-IQYFxNEyM2kW0fQlkokzVbW90yExGw","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-22T14:51:43.531Z","updatedAt":"2026-04-07T09:35:43.725Z","publishedAt":"2026-04-08T12:43:56.678Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Dino404Game-rwzdBF.js@N4HA825hP1wOigvjNWWg","previewUrl":"https://dino-404.framer.website","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"N4HA825hP1wOigvjNWWg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":82,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-08T12:43:56.678Z","updatedAt":"2026-04-08T12:43:56.678Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L55"}]