61: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"] 62:T876,

The Framer Agent Playbook

🔗 https://framer-agent-playbook.framer.website/

What it is

A copy-ready prompt library for Framer Agents: 280 real prompts across 7 categories, each with a live animated preview of what it builds. Press ⌘K to fuzzy-search all 280.

The twist — the whole site was built by the agent itself. Every section, component, the recolor, the breakpoints, all 280 cards prompted into existence on the canvas. The Playbook is proof of what it teaches.

What's inside

280 prompts (40/category, with difficulty + credit estimates) · 14 distinct live previews · a ⌘K command palette · a design.md Presets hub with 4 full copyable systems · real React code components · working light + dark mode · 3 breakpoints.

How Framer Agents helped

Via the agent CLI + MCP: generated the page structure, wrote and placed all 280 cards, recolored the site through design tokens, created tablet breakpoints, and built the code components. A 7-way parallel run wrote all 280 prompts in ~90s. I orchestrated and reviewed.

Stress test — could vs couldn't

Could: generate whole pages from a sentence, restructure layouts, create breakpoints, recolor sitewide via tokens, author hundreds of components, write and fix code components.

Couldn't (yet): no delete in the editing grammar (overwrite-and-reuse instead); brand-new code components fail to insert the normal way and need two publishes to bundle; edits inside component/template definitions don't stick (only page content does); code-file edits need the plugin open; theming one mode left the other broken until tokens were mirrored.

The rough edges are the point: where agent-built sites are effortless today, and where a human still steps in.

Built for the Framer Agents Hackathon.

63:T77b,

WHAT IT DOES

• Pick from 19 schema types — Organization, WebSite, Article, BlogPosting, NewsArticle, Product, Event, VideoObject, Person, LocalBusiness, FAQPage, BreadcrumbList, HowTo, Recipe, JobPosting, Course, Review, Service — or paste any custom schema.org JSON.

• Add schemas site-wide or per page. Each page tells Google exactly what it is.

• CMS template mode: enable Article schema on a blog template once, and every current and future post inherits valid JSON-LD automatically. No re-sync needed when you publish new posts.

• Auto-detects existing schema the plugin installed, so the editor always reflects what is live on your site.

• One-click Apply. A single script lands in the headEnd slot. Client-side navigation supported — schema re-evaluates every time Framer moves between pages without a full reload.

PRICING

• Free — 6 core schema types (Organization, WebSite, Article, BlogPosting, BreadcrumbList, FAQPage), site-wide only, up to 3 entries per site.

• Pro — launch price $15 (regular $29), one-time, lifetime updates. All 19 schema types, per-page schemas, unlimited entries, CMS template baking, and a custom JSON-LD escape hatch for any type on schema.org.

Pro licenses are purchased via Lemon Squeezy and activated by pasting the license key in the plugin's License settings. The license persists across every Framer project on the same browser.

AUTHENTICATION

None for Free. Pro requires a Lemon Squeezy license key — paste once, activate, done.

SUPPORT

Questions, feature requests, bug reports: syaokay@gmail.com

64:T13f3,

Drop in a CSV and get an instant, styled data table with all the essentials. CSV Data Table parses a hosted CSV file, adds global search, click-to-sort headers, page controls, multi-row select, and a columns menu to toggle visibility—no code required. It ships with polished defaults, subtle hover states, and complete color & typography controls for both Light and Dark modes.

Built for marketing tables, logs, feature matrices, price lists, and quick data previews inside Framer projects.

Key Features

CSV → Table in seconds: Point to a CSV file URL and it renders automatically.
Search (global): Filters across all visible columns and rows.
Column sorting: Click any header to sort asc/desc; numeric values sort numerically.
Pagination: Smooth client-side paging with a configurable page size.
Row selection: Select single or multiple rows; “Select All” per page supported.
Column visibility: Inline dropdown to show/hide columns on the fly (never hides all).
Dark/Light themes: Duplicate control sets for dark mode with thoughtful contrast.
No global CSS: Encapsulated inline styles—zero leakage to other components.

Perfect For

Pricing & feature comparison tables
Data logs, changelogs, or metrics snapshots
Team directories or product catalogs
CSV exports turned into embedded previews

How It Works (under the hood)

The component fetches your CSV from the csvFile URL and splits into headers (row 1) + rows (remaining lines).
Search lowers both sides and checks cell substrings.
Sort attempts numeric sort first (if both cells parse as numbers), otherwise localeCompare.
Pagination slices the sorted, filtered array and keeps selection scoped to global row indices (so “Select All” applies only to the current page).
Column visibility is stored in a Set; at least one column always remains visible.

Props & Controls

Data

CSV File (File control or external URL)A .csv file with the first line as headers.

Behavior

Rows Per Page (default 10)
Show Search (default On)
Dark Mode (default Off)

Styling — Light Mode

Background (container)
Border (table & inputs)
Hover Color (rows, header bg)
Input Background (search)
Accent Color (checkbox accent, selected row tint)
Text Color (muted/body text)
Header Font (caps/weight recommended)
Body Font
Border Radius (container & table)

Styling — Dark Mode

Background, Border, Hover Color, Input Background, Accent Color, Text Color(mirrors the light controls with dark-optimized defaults)

Quick Start

Add CSV Data Table to your canvas.
In CSV File, upload a .csv or paste a hosted file URL.
(Optional) Toggle Dark Mode and tune colors/typography.
Set Rows Per Page and Show Search as needed.

Tip: Use the Columns button in the top-right to quickly hide/show columns for different page contexts.

CSV Format Notes (Important)

This component uses a lightweight parser (split by line breaks and commas). For best results:

Use simple CSV without quoted commas inside cells (e.g., avoid "New York, USA" as a single cell).
Ensure the first row is headers.
Avoid empty trailing lines.
Host the CSV with proper CORS (e.g., on Framer, GitHub raw, S3, or a CDN) so the browser can fetch it.

If you need robust parsing (quoted fields, escapes), consider pre-processing your CSV or hosting a cleaned version.

65:T1448,

Showcase your build pipeline, tests, deployments, or CLI walkthroughs with a realistic terminal that types and reveals lines in order. Animated Terminal supports two line types—Typing (per-character) and Animated (fade/slide)—and can sequence them automatically, loop the whole story, and start when visible in the viewport. Customize colors, fonts, border, and macOS window controls to match your brand.

Built with framer-motion, the component uses a lightweight internal sequencing context to unlock reliable step-by-step reveals without janky timing math. Drop it on any canvas, edit your lines, and you’re done.

Key Features

Two animation modes: Typing (per-char, configurable speed) and Animated (fade/slide in).
Automatic sequencing: Lines advance only after their animation completes—no manual delays needed.
Start on view: Begin the whole sequence when the component enters the viewport (great for long pages).
Looping: Replay the entire script with a custom loop delay.
macOS chrome: Optional traffic-light window controls for instant “terminal” vibes.
Fine-grained styling: Background, border, base text color, per-line color, and full font control (monospace default).
Safe by default: No global CSS; encapsulated styles to avoid leaking across your page.

Perfect For

Product pages & “Build/Deploy/Test” sections
Dev tool marketing sites
Docs & tutorials (CLI steps)
Case studies and engineering blog visuals
Launch timelines and status feeds

How It Works (under the hood)

Typing lines render characters over time (duration = ms per character).
Animated lines fade/slide into place and instantly mark themselves “complete.”
When Sequence is ON, each line waits for the previous one to complete before starting.
Start on View can gate the entire sequence until the component is ~30% visible.
Loop resets state and replays after loopDelay.

Props & Controls

Content

Lines (Array of Objects)Configure each line independently.
- type: "typing" | "animated"
- content: string (the text to render)
- textColor: color (overrides base text color)
- duration: number (ms/char, typing only; default 60)
- delay: number (ms before line starts; optional)

Behavior

Sequence (boolean, default true)When ON, each line waits for the previous one to finish.
Start on View (boolean, default true)Delays the first line until the component is in view.
Loop (boolean, default false)Replays the full list of lines after completion.
Loop Delay (number, ms, default 2000)Pause before replaying (visible only when Loop = ON).

Visuals

Window Controls (boolean, default true)Toggle macOS-style red/amber/green dots.
Background (color, default #000000)
Text Color (color, default #FFFFFF)Base color for lines (can be overridden per line).
Border Color (color, default #333333)
Font (Framer font control)Defaults to a legible monospace with tuned line-height/letter-spacing.

Quick Start

Add Animated Terminal to your canvas.
Open Lines → add/arrange steps (mix Typing and Animated).
Toggle Sequence ON for step-by-step flow.
Turn Start on View ON to begin on scroll.
Optionally enable Loop to replay the script.

Tip: Use textColor per line to indicate state:

green #27C93F for success,
yellow #FFBD2E for progress/warnings,
white #FFFFFF for commands.

Example Line Set (copy ideas)

typing: npm run build --production (60 ms/char)
animated: ✔ Compiling TypeScript files... (green)
animated: ✔ Bundling assets complete. (green)
typing: docker compose up -d
animated: ✔ Starting containers... (yellow)
animated: ✔ All services running. (green)

66:T167e,

Turn quiet product pages into living proof. FOMO Toast rotates through a list of “just purchased” notifications—automatically, on a schedule. Each toast slides in with name, product, location, time-ago, an avatar (or autogenerated initials), and a subtle progress bar. Choose any screen corner, randomize or sequence the feed, add a close button, and even play a short sound on show.

Engineered for Framer with thoughtful details: duration is auto-capped to avoid overlap, audio gracefully fails if blocked, an ARIA live region announces updates for screen readers, and thumbnails/static renderers show a single, tidy preview.

Key Features

Auto-cycling toasts: Interval-based rotation with per-toast auto-dismiss.
Randomize or sequence: Shuffle entries or play them in order.
Four positions: Top/Bottom + Left/Right, fixed with safe spacing.
Avatar or initials: Show uploaded avatars—or auto-generate initials.
Inline progress bar: Visual countdown synced to the toast’s lifetime.
Click-through links: Entire toast can open a URL in a new tab.
Close button (optional): Let users dismiss instantly.
Sound on show (optional): Upload a file or provide a URL; set volume.
Lightweight & encapsulated: Inline styles only—no global CSS bleed.
Static/thumbnail-aware: Shows a single example toast in previews.

Perfect For

Social proof on landing/checkout pages
“Recent signups/purchases” nudges
Launch pages, promos, and seasonal campaigns
Templates that need drop-in FOMO without external libraries

How It Works (under the hood)

Data source: notifications[] (name, product, location, optional avatar/link).
Scheduler: A repeating interval (interval) creates a new toast and a dismiss timeout (duration).
Overlap guard: validatedDuration = min(duration, interval − 500ms) ensures toasts don’t collide.
Time-ago: Randomly sampled from ["Just now","1m ago","2m ago","3m ago","5m ago"].
Sound: Plays on each show if enabled (file or URL), with volume and error handling.
A11y: ARIA live region announces “New purchase notification…” text.
Static mode: In Framer’s static renderer/thumbnail, it renders the first item only.

Props & Controls

Content

Notifications (Array)Each item: name, product, location, optional avatar (ResponsiveImage), optional link.

Behavior

Randomize (true/false) — shuffle vs. sequential order.
Position ("top-left" | "top-right" | "bottom-left" | "bottom-right")
Interval (ms, default 5000) — time between toasts.
Duration (ms, default 4000) — time each toast stays visible; auto-capped below interval.

Appearance

Background (toast card)
Text Color (body + meta)
Accent Color (progress bar + location icon)
Show Avatar (toggle)
Avatar Color (fallback circle for initials)
Body Font / Name Font
Radius (card corner radius)
Shadow (elevation on/off)
Close Button (toggle + color)

Sound (optional)

Play Sound (toggle)
Sound Source (Upload File / Enter URL)
Sound File (mp3/wav/ogg) or Sound URL
Volume (0–1)

Quick Start

Drop FOMO Toast onto your page.
Populate Notifications (name, product, location; add avatar and link as needed).
Choose Position, Interval, and Duration (keep duration slightly shorter than interval).
(Optional) Enable Play Sound and set File/URL + volume.
Match brand with Background, Text, Accent, Fonts, and Radius.

Tip: Use Randomize for social proof; use Sequential for curated stories (e.g., case-study flow).

Implementation Notes

Initials logic: If no avatar, initials are derived from the name.
Click behavior: If a link exists, the toast is clickable (noopener,noreferrer).
Mobile sizing: Includes a small-screen tweak for comfortable min/max width and padding.
Audio caveat: Some browsers require prior user interaction; playback is gracefully caught/logged if blocked.

67:T70c,

Show folder structures, documentation hierarchies, or component libraries in seconds. File Tree converts a flat array (name, type, parentId) into a nested tree with keyboard-friendly buttons, smooth expand/collapse, row highlighting, and subtle vertical guide lines. Style everything—background, text, hover, selected state, indicator color, and font—to match your brand or docs.

No external libraries, no global CSS. The tree is memoized, click logic is encapsulated, and default data gets you started instantly.

Key Features

Flat → nested: Provide items with parentId; the component builds the hierarchy for you.
Expand/Collapse: Chevron rotates and preserves state; choose initial expanded folders.
Selection: Click files to select; selected rows get a custom background.
Indicators (optional): Vertical connector lines for a clean tree feel.
Polished UX: Indentation per depth, hover states, ellipsis overflow, and accessible buttons.
Fully themable: Background, text, hover, selected, indicator colors, and font control.
Safe by default: Inline styles only; nothing leaks to the rest of your page.

Perfect For

Project structures in docs or landing pages
API/SDK file maps and starter kit overviews
Design system navigation and component inventories
Knowledge bases and content outlines

68:T1055,

Bring your “latest updates” to life. Animated List steps through your items on a timer, animating each card into place with smooth scale/opacity transitions. It automatically adapts to mobile/desktop, supports custom icons and colors, and lets you tune typography for name, description, and time. Choose a delay between items, loop continuously, and style the card/border/gradient to match your brand.

Under the hood, the component maintains an index and reveals items cumulatively (newest at the top), with Framer Motion handling entry/exit for crisp performance.

Key Features

Sequential reveal: Items appear on a schedule (delay), stacking newest first.
Looping: Restart from the first item for continuous motion.
Responsive layout: Adjusts spacing, card radius, and icon size below your breakpoint.
Custom visuals: Emoji/character icons with per-item color; full control of background, borders, text, and optional gradient overlay.
Typography controls: Separate fonts for Name, Description, and Time.
Lightweight: No external CSS; animations powered by Framer Motion.

Perfect For

Notifications / activity feeds
Product updates & changelogs
Social/event timelines
“What’s new” and marketing highlights

How It Works (under the hood)

The component increments an internal index on a fixed delay.
A memoized slice returns items.slice(0, index + 1).reverse() so the newest revealed card appears on top.
Loop resets the index when the end is reached.
A resize listener toggles mobile mode using your breakpoint to adjust padding, icon size, and radii.
Cards enter with a spring scale/opacity animation and exit cleanly via AnimatePresence.

Props & Controls

Content

Items (Array) — each item:
- name (string)
- description (string)
- icon (string, e.g., "🔔")
- color (icon background)
- time (string, e.g., "1m ago")

Behavior

Delay (ms, default 1000) — interval between reveals.
Loop Animation (boolean, default true) — restart once all items are shown.
Mobile Breakpoint (px, default 768) — switches to compact sizing below this width.

Appearance

Background (card)
Text Color (primary)
Secondary Text (description/time)
Border Color
Show Gradient + Gradient Color (optional overlay)
Name Font, Description Font, Time Font

Quick Start

Drop Animated List onto your page.
Open Items and add your updates (icon + color recommended).
Set Delay (e.g., 1200ms) and enable Loop if you want continuous motion.
Tweak colors and Fonts; adjust Mobile Breakpoint if needed.

Tip: Use short names and concise descriptions for snappy, readable cards—especially on mobile.

Implementation Notes

Newest card animates in at the top (the list is reversed at render).
Hover adds a subtle scale effect for interactivity.
Cards use safe defaults for shadow, radius, and spacing; all tuned per breakpoint.

69:T1af5,

Protect your valuable images with this sophisticated password-protected gallery component. Perfect for premium content, client previews, or exclusive image collections that require secure access control.

Key Features:

Password Protection - Secure your images behind customizable password authentication
Multi-Image Gallery - Support for up to 10 protected images with smooth transitions
Advanced Security - Rate limiting with configurable max attempts and lockout periods
Blur Preview - Adjustable blur intensity lets visitors see content outline while maintaining protection
Session Memory - Optional session persistence remembers unlocked state until browser closes
Slideshow Mode - Auto-advancing slideshow with customizable intervals
Navigation Controls - Elegant arrow navigation and dot indicators
Download Protection - Optional download functionality with secure file handling
Password Visibility Toggle - User-friendly show/hide password option
Strength Indicator - Optional password strength visualization
Smooth Animations - Configurable transition durations for professional feel
Responsive Design - Perfect scaling across all device sizes

Security Features:

Rate Limiting: Configurable maximum attempts (1-10) before lockout
Lockout System: Temporary blocks (10-300 seconds) after failed attempts
Session Tracking: Prevents repeated authentication in same session
Blur Protection: Content remains visually protected even when loading
No URL Exposure: Images remain secure without direct URL access

Gallery Features:

Multi-Image Support: Up to 10 images per gallery
Smooth Transitions: Fade and scale effects between images
Navigation Options: Arrow buttons, dot indicators, keyboard controls
Auto-Slideshow: Configurable auto-advance timing
Image Counter: Shows current position in gallery
Download Control: Optional secure image downloading

Perfect For:

Photographers: Client photo galleries and proofs
Designers: Portfolio previews for potential clients
Artists: Exclusive artwork collections
Content Creators: Premium subscriber content
Businesses: Confidential visual materials
Real Estate: Private property galleries
Event Photography: Password-protected event albums
Stock Photography: Premium image previews

Customization Options:

Visual Design: Colors, fonts, border radius, blur intensity
Security Settings: Password, attempts, lockout duration
Gallery Behavior: Auto-slide, navigation visibility, transitions
Content: Custom titles, descriptions, error messages
Typography: Separate font controls for different text elements
Animation: Configurable transition speeds and effects

Technical Highlights:

Pure React/TypeScript - No external dependencies required
Local Storage Integration - Session memory without server requirements
Keyboard Navigation - Full accessibility with arrow key support
Touch-Friendly - Optimized for mobile and tablet interactions
Performance Optimized - Efficient image loading and transitions
Security-First Design - Client-side protection with multiple layers

Use Cases:

Client Deliverables: Share work samples requiring approval
Premium Memberships: Exclusive content for subscribers
Event Photography: Password-protected wedding/event albums
Portfolio Reviews: Secure client presentation galleries
Stock Preview: Watermark-free previews for potential buyers
Educational Content: Protected learning materials
Corporate Assets: Confidential visual resources

User Experience:

Intuitive Interface: Clean, professional password entry form
Visual Feedback: Loading states, error messages, attempt counters
Smooth Interactions: Elegant hover effects and transitions
Mobile Optimized: Touch-friendly navigation and inputs
Accessibility Ready: Screen reader support and keyboard navigation

Security Layers:

Password Authentication: Primary access control
Visual Blur: Content protection during loading
Rate Limiting: Prevents brute force attempts
Session Management: Temporary lockouts for security
Download Control: Optional file access restriction

This component transforms any image collection into a secure, professional gallery experience. Whether you're a photographer sharing client previews, a designer showcasing premium work, or a business protecting confidential visuals.Please note: This is a client-side lock. For secure production use, you should use server-side authentication.

Getting Started:

Upload your images to the gallery array
Set your password and security preferences
Customize the design to match your brand
Configure gallery behavior (auto-slide, navigation, etc.)
Share your protected gallery with confidence!

The component works seamlessly in Framer with full property controls, making it easy to customize every aspect without coding knowledge.

6a:T713,

Features

Smooth typing indicators that appear before each message
Apple-like spring physics for bubble animations
Messages slide in from the bottom with seamless transitions
Auto-scroll to keep the newest messages visible
Customizable contact header with a profile picture and name
Toggle animations on/off for static or animated modes
Fully responsive design that adapts to any container size

Customization Options

Bubble colors for both user and other messages
Text colors and fonts with extended typography controls
Animation timing and delay settings
Contact header with a profile picture and custom name
Divider styling and colors
Padding, spacing, and bubble width controls
Up to 20 messages with easy text editing

Use Cases

Customer testimonials and reviews
Interactive demos and tutorials
Showcase conversations and dialogues
Social proof displays
FAQ presentations
Storytelling and narrative content

Technical Highlights

iPhone-sized default dimensions (375x667px)
Production-ready with error handling
Accessibility features with ARIA labels
Performance optimized with proper state management
Cross-browser compatible
Server-side rendering safe

The component is ready for production use and provides a professional messaging interface that feels natural and engaging for users.

6b:Td34,

Details

Create stunning, shareable code snippets that stand out on social media, in documentation, and during presentations. This powerful component transforms your code into beautifully styled images with professional syntax highlighting and eye-catching backgrounds.

Key Features

Multi-Language Support: Supports over 23 programming languages, including JavaScript, TypeScript, Python, Java, C++, HTML, and CSS.
Intelligent Auto-Detection: Automatically detects the programming language based on code syntax and keywords.
Advanced Syntax Highlighting: A custom regex-powered highlighting engine provides proper color coding for keywords, strings, comments, functions, and numbers.
4 Beautiful Themes: Choose from Dark, Light, Oceanic, and Monokai themes with carefully crafted color schemes.
Stunning Backgrounds: Includes 6 gradient presets (Sunset, Ocean, Forest, Fire, Cosmic, Minimal), solid colors, and custom images.
Customizable Window Chrome: Optional macOS-style window controls with red, yellow, and green buttons.
Professional Typography: Separate font controls for the title and code, with monospace defaults.
Line Numbers: Toggle line numbers for enhanced readability.
Responsive Design: Auto-sizing works perfectly on any screen size.
HTML Entity Escaping: Safe rendering prevents code interpretation issues.

Perfect For

Social media code sharing (Twitter, LinkedIn, Instagram)
Technical blog posts and articles
Documentation and tutorials
Presentations and slides
Code portfolio showcases
Educational materials

Use Cases

Developers: Share code snippets with proper syntax highlighting.
Educators: Create visual code examples for courses and tutorials.
Content Creators: Generate eye-catching code images for social media.
Technical Writers: Enhance documentation with beautiful code blocks.
Presenters: Add professional code visuals to presentations.

Technical Highlights

React + TypeScript with full type safety.
Custom syntax highlighting engine (no external dependencies).
Responsive height that follows the container while keeping code blocks centered.
HTML-safe rendering with proper entity escaping.
Optimized performance with React hooks and memoization.
Framer-native property controls for seamless editing.

The component automatically centers code blocks within custom heights, making it perfect for creating consistent layouts while ensuring your code always looks crisp and readable. Whether you're sharing a quick JavaScript function or a complex Python algorithm, this component makes your code look professional and engaging.

6c:Ta4a,

Details

This smart download button transforms your user's experience by automatically adapting to their operating system. It detects whether a visitor is on Windows, macOS, or Linux and displays the appropriate OS icon with customized text, such as "Download for Windows" or "Download for macOS".

Key Features

Automatic OS Detection: Intelligently identifies the user's operating system using the browser's user agent.
Platform-Specific Icons: Uses official OS icons from Simple Icons (Windows, Apple, Linux).
Customizable Text: Set unique button text for each operating system.
Smart Redirects: Routes users to the correct download link based on their detected OS.
Fallback Support: Defaults to the Windows link for unrecognized systems.
Hover Effects: Smooth animations with a lift effect and shadow transitions.
Full Customization: Control colors, padding, border radius, fonts, and spacing.
Accessibility Ready: Includes proper ARIA labels and keyboard navigation support.

Perfect For

Software download pages
App landing pages
Cross-platform tools
Desktop applications
Developer tools and utilities

Use Cases

Desktop app downloads (Electron, native apps)
Development tools and IDEs
Cross-platform software distribution
Browser extensions with OS-specific features
Gaming applications with platform variants

Technical Highlights

TypeScript-powered with full type safety
Uses React hooks for optimal performance
Responsive design that works on all screen sizes
No external dependencies required
SEO-friendly with proper semantic markup

This component eliminates guesswork for users by presenting them with exactly what they need for their operating system, which improves conversion rates and user experience. It automatically shows OS-specific text by default but can be switched to a custom mode for universal messaging. Each OS can also have its own download link, making it perfect for applications with different installers for different platforms.

60:["$","$L61",null,{"value":{"fallback":{"$inf$activity-creator-4bd395f8-33f8-481e-8364-c8d1ac3cf6ac-all:/unified/creator/4bd395f8-33f8-481e-8364-c8d1ac3cf6ac/activity/":[{"data":[{"id":"019ed901-eb9a-7222-942c-93881e3cd6c1","type":"comment.liked","target":{"type":"comment","id":"019ed67b-4029-771d-a345-8120dc4791c2","preview":"underrated project woah","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"underrated project woah"}]},{"type":"paragraph"}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed4bc-08af-7448-88d9-2a2dc63e805b","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed67b-4029-771d-a345-8120dc4791c2"},"repost":null}},"context":{"type":"post","id":"019ed4bc-08af-7448-88d9-2a2dc63e805b","preview":"I built a 280-prompt playbook for Framer Agents — entirely WITH a Framer Agent.\nCopy any prompt, watch its live preview, ⌘K to search all 280. The site is its own proof.\nBuilt for the @framer Agents Hackathon 👇 \nhttps://framer-agent-playbook.framer.website/","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I built a 280-prompt playbook for Framer Agents — entirely WITH a Framer Agent."}]},{"type":"paragraph","content":[{"type":"text","text":"Copy any prompt, watch its live preview, ⌘K to search all 280. The site is its own proof."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for the @framer Agents Hackathon "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer-agent-playbook.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer-agent-playbook.framer.website/","target":"_blank"}}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed4bc-08af-7448-88d9-2a2dc63e805b","like":{"count":29,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","slug":"syauqi","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-18T04:34:02.263Z","latestAt":"2026-06-18T04:34:02.263Z"},{"id":"019ed4bf-5a5e-76cb-b62c-57a5f30314e1","type":"post.liked","target":{"type":"post","id":"019ed20c-2a4b-727c-a60b-53216a70450c","preview":"Remix Link\nSetrex is a Framer SaaS template for AI SaaS, startups, AI Agent, B2B software, fintech, automation, and tech products. SEO-ready and conversion-focused.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Remix Link","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://framer.link/Qso0j9p","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Setrex is a Framer SaaS template for AI SaaS, startups, AI Agent, B2B software, fintech, automation, and tech products. SEO-ready and conversion-focused."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a3a50c10-7d16-410f-8a82-19525b1f5ba2/cprdzqy8","targetDeleted":false,"owned":false,"actions":{"postId":"019ed20c-2a4b-727c-a60b-53216a70450c","like":{"count":94,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","slug":"syauqi","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T08:42:50.828Z","latestAt":"2026-06-17T08:42:50.828Z"},{"id":"019ed4bf-435a-72ca-80d1-31f0f40c4afd","type":"comment.reply","target":{"type":"post","id":"019ed4bc-08af-7448-88d9-2a2dc63e805b","preview":"I built a 280-prompt playbook for Framer Agents — entirely WITH a Framer Agent.\nCopy any prompt, watch its live preview, ⌘K to search all 280. The site is its own proof.\nBuilt for the @framer Agents Hackathon 👇 \nhttps://framer-agent-playbook.framer.website/","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I built a 280-prompt playbook for Framer Agents — entirely WITH a Framer Agent."}]},{"type":"paragraph","content":[{"type":"text","text":"Copy any prompt, watch its live preview, ⌘K to search all 280. The site is its own proof."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for the @framer Agents Hackathon "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer-agent-playbook.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer-agent-playbook.framer.website/","target":"_blank"}}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed4bc-08af-7448-88d9-2a2dc63e805b","like":{"count":29,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ed4bf-4347-73d2-a099-439feea050ad","preview":"Thank you so much!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thank you so much!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed4bc-08af-7448-88d9-2a2dc63e805b","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019ed4be-a64f-7551-9f4e-4093fa9c4d6d"},"repost":null}},"actors":[{"id":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","slug":"syauqi","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T08:42:44.954Z","latestAt":"2026-06-17T08:42:44.954Z"},{"id":"019ed4bf-337c-778c-a096-82a908e9ca49","type":"comment.liked","target":{"type":"comment","id":"019ed4be-a64f-7551-9f4e-4093fa9c4d6d","preview":"Great achievement 💥","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Great achievement "},{"type":"emoji","attrs":{"name":"boom","emoji":"💥"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed4bc-08af-7448-88d9-2a2dc63e805b","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ed4be-a64f-7551-9f4e-4093fa9c4d6d"},"repost":null}},"context":{"type":"post","id":"019ed4bc-08af-7448-88d9-2a2dc63e805b","preview":"I built a 280-prompt playbook for Framer Agents — entirely WITH a Framer Agent.\nCopy any prompt, watch its live preview, ⌘K to search all 280. The site is its own proof.\nBuilt for the @framer Agents Hackathon 👇 \nhttps://framer-agent-playbook.framer.website/","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I built a 280-prompt playbook for Framer Agents — entirely WITH a Framer Agent."}]},{"type":"paragraph","content":[{"type":"text","text":"Copy any prompt, watch its live preview, ⌘K to search all 280. The site is its own proof."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for the @framer Agents Hackathon "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer-agent-playbook.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer-agent-playbook.framer.website/","target":"_blank"}}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed4bc-08af-7448-88d9-2a2dc63e805b","like":{"count":29,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","slug":"syauqi","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T08:42:40.888Z","latestAt":"2026-06-17T08:42:40.888Z"},{"id":"019ed4a5-4938-71cd-b8f3-78dca397bbcd","type":"post.liked","target":{"type":"post","id":"019ed30f-fb47-768c-85c5-29b31e7c7a6f","preview":"Check out my submission for Agents Hackaton. Plenty of knobs to turn around 😂","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Check out my submission for Agents Hackaton. Plenty of knobs to turn around "},{"type":"emoji","attrs":{"name":"joy","emoji":"😂"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed30f-fb47-768c-85c5-29b31e7c7a6f","like":{"count":445,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","slug":"syauqi","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T08:14:22.514Z","latestAt":"2026-06-17T08:14:22.514Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:4bd395f8-33f8-481e-8364-c8d1ac3cf6ac:/unified/posts/?creator=4bd395f8-33f8-481e-8364-c8d1ac3cf6ac&with=reposts":[{"data":[{"id":"019ed4bc-08af-7448-88d9-2a2dc63e805b","title":null,"body":"

I built a 280-prompt playbook for Framer Agents — entirely WITH a Framer Agent.

Copy any prompt, watch its live preview, ⌘K to search all 280. The site is its own proof.

Built for the @framer Agents Hackathon 👇

https://framer-agent-playbook.framer.website/

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"I built a 280-prompt playbook for Framer Agents — entirely WITH a Framer Agent."}]},{"type":"paragraph","content":[{"type":"text","text":"Copy any prompt, watch its live preview, ⌘K to search all 280. The site is its own proof."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for the @framer Agents Hackathon "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"https://framer-agent-playbook.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer-agent-playbook.framer.website/","target":"_blank"}}]}]}]},"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[],"contests":[{"id":"019ed4bc-08af-7448-88d9-2fb8eca1efbd","contestId":"agents-hackathon","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg"},"title":"Agent Playbook","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The Framer Agent Playbook"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"link","emoji":"🔗"}},{"type":"text","text":" "},{"type":"text","text":"https://framer-agent-playbook.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer-agent-playbook.framer.website/","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"What it is","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"A copy-ready prompt library for Framer Agents: 280 real prompts across 7 categories, each with a live animated preview of what it builds. Press ⌘K to fuzzy-search all 280."}]},{"type":"paragraph","content":[{"type":"text","text":"The twist — the whole site was built by the agent itself. Every section, component, the recolor, the breakpoints, all 280 cards prompted into existence on the canvas. The Playbook is proof of what it teaches."}]},{"type":"customHeading","content":[{"type":"text","text":"What's inside","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"280 prompts (40/category, with difficulty + credit estimates) · 14 distinct live previews · a ⌘K command palette · a "},{"type":"text","text":"design.md","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"http://design.md","target":"_blank"}}]},{"type":"text","text":" Presets hub with 4 full copyable systems · real React code components · working light + dark mode · 3 breakpoints."}]},{"type":"customHeading","content":[{"type":"text","text":"How Framer Agents helped","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Via the agent CLI + MCP: generated the page structure, wrote and placed all 280 cards, recolored the site through design tokens, created tablet breakpoints, and built the code components. A 7-way parallel run wrote all 280 prompts in ~90s. I orchestrated and reviewed."}]},{"type":"customHeading","content":[{"type":"text","text":"Stress test — could vs couldn't","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Could: generate whole pages from a sentence, restructure layouts, create breakpoints, recolor sitewide via tokens, author hundreds of components, write and fix code components."}]},{"type":"paragraph","content":[{"type":"text","text":"Couldn't (yet): no delete in the editing grammar (overwrite-and-reuse instead); brand-new code components fail to insert the normal way and need two publishes to bundle; edits inside component/template definitions don't stick (only page content does); code-file edits need the plugin open; theming one mode left the other broken until tokens were mirrored."}]},{"type":"paragraph","content":[{"type":"text","text":"The rough edges are the point: where agent-built sites are effortless today, and where a human still steps in."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for the Framer Agents Hackathon."}]}]},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/4bd395f8-33f8-481e-8364-c8d1ac3cf6ac/awrzyo66","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"data":{"previewUrl":"https://framer-agent-playbook.framer.website/"},"winner":false,"createdAt":"2026-06-17T08:39:13.375Z","updatedAt":"2026-06-17T08:39:13.375Z"}],"categories":[],"tags":[],"likes":{"count":29,"liked":false},"comments":{"count":3},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T08:39:13.335Z","updatedAt":"2026-06-17T08:39:13.335Z"},{"id":"019db0b2-5951-771f-8727-59981d6eece1","title":null,"body":"

Schemark for you schema markup needs!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Schemark for you schema markup needs!"}]}]},"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"1059","resolved":true,"title":"Schemark","body":"$63","bodyJson":null,"introduction":"Schema.org markup, made easy","slug":"schemark","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1059-cViyeBYdKFG9sKw1GstCivG1cfyPRH","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1059-zf3ecpGAYjl1yNmLToUbrXjEuwaYdA","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1059-t0KjbrjopxZXAlLys8i485Rqrkkxgz","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/plugins/1059-NPxqcf9JPO9IpSpo7Za304oadglpGL","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-21T15:18:17.762Z","updatedAt":"2026-06-18T16:23:37.717Z","publishedAt":"2026-04-21T15:39:31.537Z","featuredAt":null,"approvedAt":null,"type":"plugin","attributes":{"framerPluginId":"b027xekj54ceoiwi0iymj8wjp","paid":true,"categories":[{"id":"1ad3e7b2-bc61-42ce-b01a-7c8bb2278f1a","name":"CMS","slug":"cms"}],"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-18T16:23:38.400Z","createdAt":"2026-04-21T15:39:31.537Z","updatedAt":"2026-06-18T16:23:38.400Z"},{"id":"0199c864-9a6b-71db-87eb-93170cbd3b7a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"k3tPHS54lAAIdyHFrDkw","resolved":true,"title":"CSV DataTable","body":"$64","bodyJson":null,"introduction":"A clean, fast CSV data table for Framer","slug":"csv-datatable","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/k3tPHS54lAAIdyHFrDkw/csv-datatable-RSHOJD3QVTyDD8GyxyLu6Zah9zTlK5","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-03T12:42:10.948Z","updatedAt":"2026-04-18T18:18:00.474Z","publishedAt":"2025-10-09T09:54:20.395Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://readable-task-798401.framer.app/","price":"5","paymentUrl":"https://sauwarna.lemonsqueezy.com/buy/8c324c22-1689-4f39-99cb-87b5644fff00","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"odM072Z7aNXzjfyMvPe5","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-09T09:54:20.395Z","updatedAt":"2025-10-09T09:54:20.395Z"},{"id":"0199c6eb-d378-73d9-ba3d-0b82a5334558","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"CtVvh61M2hvrf6YpavlM","resolved":true,"title":"Animated Terminal","body":"$65","bodyJson":null,"introduction":"A slick macOS-style terminal for Framer","slug":"animated-terminal","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/CtVvh61M2hvrf6YpavlM/animated-terminal-bbey5wm3WZOCyfnQ8JVTHFUAZN2Fvj","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-03T12:08:13.477Z","updatedAt":"2026-04-18T18:16:35.824Z","publishedAt":"2025-10-09T03:02:47.928Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://first-commit-029367.framer.app/","price":"5","paymentUrl":"https://sauwarna.lemonsqueezy.com/buy/2a2ac652-96dd-41c2-b84b-10350834fed3","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"GLoTdv50tAYr0pKmUIKZ","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":"2025-10-09T03:02:47.928Z","updatedAt":"2025-10-09T03:02:47.928Z"},{"id":"0199c6eb-c602-7e3d-93c4-22e9c66051f6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Y0lpLDk9zlEb4UyT3joH","resolved":true,"title":"FOMO Toast","body":"$66","bodyJson":null,"introduction":"Lightweight, corner-pinned toasts","slug":"fomo-toast","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Y0lpLDk9zlEb4UyT3joH/fomo-toast-vkFCUN7stnZnhcX0ighAywN47VdMxj","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-03T13:24:31.886Z","updatedAt":"2026-04-18T18:17:13.083Z","publishedAt":"2025-10-09T03:02:44.482Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://tiny-homeowners-679798.framer.app/","price":"5","paymentUrl":"https://sauwarna.lemonsqueezy.com/buy/74a98319-19df-4401-9d07-dfd621e71165","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"GCSQ4ZxZwwIgkhvhMWju","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-09T03:02:44.482Z","updatedAt":"2025-10-09T03:02:44.482Z"},{"id":"0199c6eb-b92c-76a7-9035-36cd00c270cf","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ScuJtSuShi8zpihOFDSm","resolved":true,"title":"File Tree","body":"$67","bodyJson":null,"introduction":"A minimal, performant file tree","slug":"file-tree","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ScuJtSuShi8zpihOFDSm/file-tree-8tQAwn7zSCEKlvA1KmFAElcGzoyrLH","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-03T13:39:08.170Z","updatedAt":"2026-04-18T18:17:24.376Z","publishedAt":"2025-10-09T03:02:41.196Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://higher-experiences-408038.framer.app/","price":"5","paymentUrl":"https://sauwarna.lemonsqueezy.com/buy/6aef24bf-34a6-4acb-b707-56e2a7df50e0","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"OYQQAwu2lbw8TMQRI1uS","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-10-09T03:02:41.196Z","updatedAt":"2025-10-09T03:02:41.196Z"},{"id":"0199c6eb-a060-709c-8325-a5079597dab1","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ZXvxLPPxGeKQLBRUcFwz","resolved":true,"title":"Animated List","body":"$68","bodyJson":null,"introduction":"A polished, responsive feed that reveals","slug":"animated-list","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ZXvxLPPxGeKQLBRUcFwz/animated-list-j8dalfCDIxOFRwJKaK9GDAk5fGLKU8","metadata":{"tint":{"h":60,"s":26,"l":47},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-03T13:47:52.992Z","updatedAt":"2026-04-18T18:17:42.031Z","publishedAt":"2025-10-09T03:02:34.848Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://aqua-mindset-570607.framer.app/","price":"5","paymentUrl":"https://sauwarna.lemonsqueezy.com/buy/03f3b3a5-7243-40fe-9dcc-1905a02a73ec","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"GMfEF80YNVrwzdCJLtb5","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":"2025-10-09T03:02:34.848Z","updatedAt":"2025-10-09T03:02:34.848Z"},{"id":"01995ae8-4fea-7d75-90b7-f9a6c6947f55","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fO484c9xcZqydSXdqdGC","resolved":true,"title":"Image Locker","body":"$69","bodyJson":null,"introduction":"Password-protected image gallery","slug":"image-locker","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/fO484c9xcZqydSXdqdGC/image-locker-W84CCDDfXZ7ZTwhs2SSwsJsA2YW1UJ","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-10T09:04:41.889Z","updatedAt":"2026-04-18T18:16:20.828Z","publishedAt":"2025-09-18T03:39:58.314Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://streamlined-road-285569.framer.app/","price":"5","paymentUrl":"https://sauwarna.lemonsqueezy.com/buy/e55bf7a7-50dc-4b62-87bb-07ac55428c79","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"MYQldErBBDkQeYDKKAZZ","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":"2025-09-18T03:39:58.314Z","updatedAt":"2025-09-18T03:39:58.314Z"},{"id":"0198e6bf-de58-7dfd-abad-38b3e1163868","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"k0wr2X8IbcbzpW6kNQvw","resolved":true,"title":"Message Chat","body":"$6a","bodyJson":null,"introduction":"Animated message-style chat component","slug":"message-chat","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/k0wr2X8IbcbzpW6kNQvw/message-chat-T0ieL9WAuQg0BV7NGDrCyBw9roVLSH","metadata":{"tint":{"h":212,"s":94,"l":25},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-05T15:55:20.474Z","updatedAt":"2026-04-18T18:15:06.863Z","publishedAt":"2025-08-26T14:19:50.744Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://indigo-designer-631757.framer.app/","price":"5","paymentUrl":"https://sauwarna.lemonsqueezy.com/buy/421cdf9f-7634-43ab-87b1-49b7edf1ede0","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"jaOqsrrstK9TxSL6SLUb","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-08-26T14:19:50.744Z","updatedAt":"2025-08-26T14:19:50.744Z"},{"id":"01989db8-1258-7d4a-ae57-83acb3b1d906","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"qkUeANEQWrKk8iZMegkp","resolved":true,"title":"Code Block Generator","body":"$6b","bodyJson":null,"introduction":"Beautiful code block image generator","slug":"code-block-generator","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/qkUeANEQWrKk8iZMegkp/code-block-generator-yS5OmvSHymGCqjS7CuaUUNdKwMQVfi","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-06T09:51:26.110Z","updatedAt":"2026-04-18T18:15:46.172Z","publishedAt":"2025-08-12T09:59:03.000Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://beautiful-beautifully-028729.framer.app/","price":"5","paymentUrl":"https://sauwarna.lemonsqueezy.com/buy/81b0ce85-90fe-44f5-a834-ca3da02d9093","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"dWr1nX80Xkn1nlNW5dsJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-12T09:59:03.000Z","updatedAt":"2025-08-12T09:59:03.000Z"},{"id":"01987f45-86b7-7afb-92a9-81f48555359f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OX6wYJkXwBYR7iDGaRzS","resolved":true,"title":"OS Download Button","body":"$6c","bodyJson":null,"introduction":"","slug":"os-download-button","author":{"framerUserId":"4bd395f8-33f8-481e-8364-c8d1ac3cf6ac","name":"Syauqizaidan Khairan Khalaf","slug":"syauqi","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66613/avatar-cjTlh2yfhFKHdm9rEUsYRofDzOvNXE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/OX6wYJkXwBYR7iDGaRzS/os-download-button-rqnPosOSY4kZgBb1dzAupMP1ooEwPO","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-06T09:38:45.248Z","updatedAt":"2025-08-06T11:54:49.058Z","publishedAt":"2025-08-06T12:05:19.671Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/SmartOSDownloadButton-KcxP.js@vrepOhjWR3CXBEkjdzVV","previewUrl":"https://trusting-humor-117279.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"vrepOhjWR3CXBEkjdzVV","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-06T12:05:19.671Z","updatedAt":"2025-08-06T12:05:19.671Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L6d"}]