`, search for a relevant image and use it. --- ## Shader Nodes & Visual Effects Shader nodes are a powerful node type that combines **generative visuals**, **image/video processing**, and **visual effects** (ASCII, dither, halftone, glitch, art filters). They render via WebGL and can be placed anywhere in the design like any other node. ### Creating a Shader Node Use `add_node` with `type: "shader"`: ``` add_node parentId: "" type: "shader" shaderType: "meshGradient" className: "w-full h-[400px] rounded-2xl" ``` ### Input Sources | Input Type | Description | Key Properties | |-----------|-------------|----------------| | `shader` (default) | Generative WebGL visuals | `shaderType`, `shaderSettings` | | `image` | Process an image through effects | `mediaInput: { mediaUrl, mediaType: "image", objectFit }` | | `video` | Process a video through effects | `mediaInput: { mediaUrl, mediaType: "video" }` | | `fill` | Solid color through effects | `fillColor: "#hex"` | ### Generative Shader Types (11) | Shader | Description | Best For | |--------|-------------|----------| | `meshGradient` | Smooth organic color blending | Hero backgrounds, ambient visuals | | `dotGrid` | Animated dot grid pattern | Tech/data aesthetics | | `voronoi` | Cell-based organic pattern | Abstract textures | | `liquidMetal` | Metallic fluid simulation | Premium/luxury visuals | | `chrome` | Chrome reflection effect | Bold, reflective accents | | `pulsar` | Radial pulsing energy | Dynamic, attention-grabbing | | `blackHole` | Gravitational distortion | Dramatic dark visuals | | `glass` | Frosted glass refraction | Subtle, elegant overlays | | `spiral` | Spiraling motion pattern | Hypnotic, playful | | `particles` | Floating particle system | Ambient, atmospheric | | `fireworks` | Exploding particle bursts | Celebration, energy | ### Visual Effects (28) Apply effects on top of any input source. Set `effectId` and `effectEnabled: true`: ``` add_node parentId: "" type: "shader" inputType: "image" mediaInput: { mediaUrl: "", mediaType: "image", objectFit: "cover" } effectId: "ascii-standard" effectEnabled: true className: "w-full h-[500px] rounded-2xl" ``` | Category | Effect IDs | Description | |----------|-----------|-------------| | **ASCII** | `ascii-standard`, `ascii-dense`, `ascii-minimal`, `ascii-blocks`, `ascii-braille`, `ascii-technical`, `ascii-matrix`, `ascii-hatching` | Convert visuals to ASCII character art | | **Dither** | `dither-floyd-steinberg`, `dither-atkinson`, `dither-stucki`, `dither-sierra`, `dither-sierra-lite`, `dither-burkes`, `dither-jarvis-judice-ninke`, `dither-two-row-sierra`, `color-separation` | Retro dithering patterns | | **Halftone** | `halftone-mono`, `halftone-cmyk` | Print-style dot patterns (mono or CMYK) | | **Glitch** | `glitch-vhs`, `glitch-digital`, `glitch-weird`, `glitch-chromatic` | Digital corruption and distortion | | **Art** | `art-kuwahara`, `art-crosshatch`, `art-lineart`, `art-engraving`, `art-stipple` | Painterly and sketch-style filters | ### Post-Process Stack Layer additional effects with `postProcesses`: `scanlines`, `vignette`, `bloom`, `grain`, `noise`, `pixelate`, `wave`, `rgb-glitch`, `brightness-contrast`, `color-tint`, `sepia`, `grid`, `dot-screen`, `light-beams`, `warp`, `motion-blur`, `chromatic-aberration`, `curvature`. ``` postProcesses: [ { type: "grain", enabled: true, settings: { intensity: 0.3 } }, { type: "vignette", enabled: true, settings: { intensity: 0.5 } } ] ``` ### Common Recipes **ASCII art hero from an image:** ``` search_images query: "city skyline" orientation: "horizontal" limit: 1 add_node parentId: "" type: "shader" inputType: "image" mediaInput: { mediaUrl: "", mediaType: "image", objectFit: "cover" } effectId: "ascii-standard" effectEnabled: true className: "w-full h-[500px]" ``` **Generative gradient background:** ``` add_node parentId: "" type: "shader" shaderType: "meshGradient" className: "w-full h-[600px]" ``` **Halftone effect on a photo:** ``` add_node parentId: "" type: "shader" inputType: "image" mediaInput: { mediaUrl: "", mediaType: "image", objectFit: "cover" } effectId: "halftone-mono" effectEnabled: true className: "w-[400px] h-[400px] rounded-2xl" ``` --- ## Node Types & HTML Tags Every node maps 1:1 to an HTML element. The `type` determines behavior; the `tag` determines which HTML element renders. | Type | Default Tag | All Valid Tags | Content Property | |------|-------------|----------------|-----------------| | **frame** | `div` | div, section, article, aside, main, nav, header, footer, ul, ol, li, figure, figcaption, form, table, thead, tbody, tr, th, td | (none — pure container) | | **text** | `p` | p, span, h1, h2, h3, h4, h5, h6, blockquote, label, li | `textContent` | | **image** | `img` | img | `src`, `alt`, `objectFit` | | **button** | `button` | button, a, div | `textContent`, `variant` | | **link** | `a` | a, button, div, span | `textContent`, `href`, `target` | | **icon** | `svg` | svg | `iconName` (kebab-case), `iconLibrary`, `iconWeight` | | **input** | `input` | input, textarea, select | `placeholder`, `inputType`, `label` | | **video** | `video` | video | `src`, `poster`, `autoPlay`, `loop`, `muted` | | **shader** | (WebGL) | — | `shaderType`, `inputType`, `effectId`, `effectEnabled`, `effectSettings`, `postProcesses` | | **component** | `div` | div | `componentId`, `overrides` | ### Tag Determines Type in JSX When writing JSX for `add_section`, the HTML tag determines the node type: ```

-> frame -> image

-> frame

``` --- ## Icons Efecto supports 4 icon libraries with ~9,400 icons total. Icons render as SVG and inherit color from `currentColor`. ### How to Write Icons in JSX The canonical format: ```jsx ``` - **`icon`** — Icon name in **kebab-case** (e.g. `arrow-right`, `magnifying-glass`, `google-logo`) - **`className`** — Size via `w-*` / `h-*`, color via `text-*` classes - **`iconLibrary`** — Optional: `phosphor` (default), `lucide`, `heroicons`, `radix` - **`iconWeight`** — Optional: `thin`, `light`, `regular` (default), `bold`, `fill`, `duotone` (Phosphor only) ### Common Icon Names (Phosphor — default library) | Category | Icons | |----------|-------| | **Arrows** | `arrow-right`, `arrow-left`, `arrow-up`, `arrow-down`, `caret-right`, `caret-down` | | **Actions** | `check`, `x`, `plus`, `minus`, `magnifying-glass`, `funnel`, `pencil`, `trash` | | **UI** | `gear`, `sliders`, `dots-three`, `list`, `squares-four`, `sidebar` | | **Social** | `google-logo`, `apple-logo`, `github-logo`, `x-logo`, `linkedin-logo`, `discord-logo`, `facebook-logo`, `instagram-logo`, `youtube-logo` | | **Objects** | `envelope`, `lock`, `eye`, `eye-slash`, `star`, `heart`, `user`, `users`, `house`, `lightning`, `fire`, `rocket` | | **Media** | `image`, `camera`, `play`, `pause`, `microphone`, `speaker-high` | | **Commerce** | `shopping-cart`, `credit-card`, `currency-dollar`, `receipt`, `package` | ### Icon Sizing Guide ``` w-3 h-3 /* 12px — tiny, inline indicators */ w-4 h-4 /* 16px — inline with small text */ w-5 h-5 /* 20px — standard UI icon */ w-6 h-6 /* 24px — default, comfortable */ w-8 h-8 /* 32px — feature icons, cards */ w-10 h-10 /* 40px — hero feature icons */ w-12 h-12 /* 48px — large decorative */ w-16 h-16 /* 64px — hero section centerpiece */ ``` ### Icon Patterns in Sections **Feature card with icon:** ```jsx

Lightning Fast

Deploy in seconds, not hours.

``` **Button with icon (icons are siblings, not children):** ```jsx
Get Started
``` **Social icons row:** ```jsx

``` **Input with icon:** ```jsx

``` **Using a different library (Lucide):** ```jsx ``` **Using a weight variant (Phosphor bold):** ```jsx ``` --- ## Tailwind CSS Patterns That Work ### Layout ``` flex /* Horizontal flex row */ flex flex-col /* Vertical flex column */ items-center /* Center cross-axis */ items-start /* Align to start */ justify-between /* Space between children */ justify-center /* Center main-axis */ gap-2 gap-4 gap-8 /* Gap between flex children */ grow /* Fill remaining space (DO NOT use flex-1) */ ``` ### Spacing ``` p-4 p-6 p-8 p-12 /* Padding all sides */ px-6 py-4 /* Horizontal / vertical padding */ pt-8 pb-16 /* Top / bottom padding */ mx-auto /* Center horizontally */ ``` ### Sizing ``` w-full /* Full width of parent */ w-auto /* Width from content */ w-fit /* Shrink-wrap width */ w-[600px] /* Fixed pixel width */ max-w-2xl max-w-5xl /* Maximum width constraints */ min-h-screen /* Minimum full viewport height */ h-[400px] /* Fixed pixel height */ ``` ### Typography ``` text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl text-5xl text-6xl text-7xl text-8xl text-9xl font-light font-normal font-medium font-semibold font-bold font-extrabold font-black leading-tight leading-snug leading-normal leading-relaxed tracking-tight tracking-normal tracking-wide tracking-widest text-left text-center text-right uppercase lowercase capitalize ``` ### Theme-Aware Colors (Preferred) Efecto supports a semantic token system. When a theme is active, these classes auto-adapt to light/dark/custom modes: ``` /* Backgrounds */ bg-background /* Page/artboard background */ bg-card /* Card surfaces */ bg-popover /* Popover/dropdown surfaces */ bg-primary /* Primary action backgrounds */ bg-secondary /* Secondary surfaces */ bg-muted /* Muted/subtle backgrounds */ bg-accent /* Accent highlights */ bg-destructive /* Destructive/error backgrounds */ bg-input /* Input field backgrounds */ /* Text */ text-foreground /* Primary text */ text-primary-foreground /* Text on primary backgrounds */ text-secondary-foreground /* Text on secondary surfaces */ text-muted-foreground /* Muted/secondary text */ text-accent-foreground /* Text on accent backgrounds */ text-card-foreground /* Text on cards */ text-popover-foreground /* Text on popovers */ text-destructive-foreground /* Text on destructive backgrounds */ /* Borders */ border-border /* Default border color */ ring-ring /* Focus ring color */ ``` **When to use semantic vs hardcoded colors:** - **Semantic** (`bg-primary`, `text-foreground`): UI components, buttons, cards, text — anything that should adapt with theme/mode changes - **Hardcoded** (`bg-blue-500`, `text-white`): Decorative elements, brand-specific colors, illustrations, gradients These classes map to CSS custom properties (`--background`, `--primary`, etc.) and automatically update when the theme or mode changes. shadcn is the default token system, but these are standard CSS variables — any design system that provides them will work. ### Colors (NAMED ONLY) Use named Tailwind colors. **Never use arbitrary hex** like `bg-[#f9f9f9]` — it silently fails at runtime. ``` /* Backgrounds */ bg-white bg-black bg-gray-50 bg-gray-100 bg-gray-900 bg-neutral-950 bg-blue-50 bg-blue-500 bg-blue-600 bg-indigo-500 bg-purple-500 bg-green-50 bg-green-500 bg-red-50 bg-red-500 bg-amber-50 bg-yellow-400 /* Text */ text-white text-black text-gray-400 text-gray-500 text-gray-600 text-gray-700 text-gray-900 text-blue-600 text-blue-500 text-indigo-600 text-green-600 text-red-600 /* Borders */ border-gray-100 border-gray-200 border-gray-300 border-blue-500 /* If you MUST use a specific hex color, use inline style instead: */ style: { "background-color": "#f9f9f9" } ``` ### Borders & Radius ``` border border-2 /* Border width */ border-gray-200 border-gray-300 /* Border color */ rounded rounded-lg rounded-xl rounded-2xl rounded-full /* Border radius */ ``` ### Effects ``` shadow-sm shadow shadow-md shadow-lg shadow-xl opacity-50 opacity-75 ring-1 ring-2 ring-blue-500 /* Ring / outline */ ``` ### Gradients ``` bg-gradient-to-r from-blue-500 to-purple-500 bg-gradient-to-b from-white to-gray-50 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 ``` ### Fills (Preferred: `set_fill` tool) For solid colors, gradients, and image backgrounds, prefer the `set_fill` tool over manually setting className/style. It handles the dual-write pattern automatically. ``` # Solid color set_fill targetId: "" fill: { type: "solid", color: "blue-500" } # Linear gradient set_fill targetId: "" fill: { type: "gradient", gradient: { type: "linear", angle: 90, stops: [{ color: "#3b82f6", position: 0 }, { color: "#8b5cf6", position: 1 }] } } # Radial gradient set_fill targetId: "" fill: { type: "gradient", gradient: { type: "radial", stops: [{ color: "#3b82f6", position: 0 }, { color: "#1e1b4b", position: 1 }] } } # Image fill set_fill targetId: "" fill: { type: "image", url: "https://...", size: "cover", position: "center" } # Clear fill set_fill targetId: "" ``` Works on both nodes and artboards. For artboards, solid fills update `backgroundColor` for backward compatibility. ### Links & Anchors Any node can be made clickable with the `link` property on `add_node`, `update_node`, or `batch_update`. Use `elementId` to make a node an anchor target. | Link Type | Use Case | Required Fields | |-----------|----------|-----------------| | `url` | External URL | `url`, optional `target: "_blank"` | | `page` | Navigate to another artboard | `pageId` (artboard ID) | | `section` | Scroll to element anchor | `sectionId` (matches an `elementId`) | | `email` | mailto link | `email` | | `phone` | tel link | `phone` | ``` # Make a button link to an external URL update_node nodeId: "" link: { type: "url", url: "https://example.com", target: "_blank" } # Mark a section as an anchor target update_node nodeId: "" elementId: "pricing" # Link a nav item to that anchor update_node nodeId: "" link: { type: "section", sectionId: "pricing" } # Link to another artboard (page navigation) update_node nodeId: "" link: { type: "page", pageId: "" } # Remove a link update_node nodeId: "" link: null ``` Works on any node type — frames, text, images, buttons. For published sites, `page` and `section` links become real navigation. --- ## Artboard Best Practices ### Standard Sizes | Name | Width | Height | Use Case | |------|-------|--------|----------| | Desktop | 1440 | 900+ | Full website pages | | Desktop (narrow) | 1280 | 800+ | Content-focused pages | | Tablet | 768 | 1024 | Tablet responsive view | | Mobile | 375 | 812 | iPhone / mobile view | ### Always Start With ``` create_artboard: name: "Homepage" width: 1440 height: 900 backgroundColor: "#ffffff" className: "flex flex-col" ``` - **`className: "flex flex-col"`** is essential — without it, children overlap at (0,0) - **`backgroundColor`** is an inline style property, NOT a Tailwind class - Height grows automatically when content overflows, but set an initial height --- ## Common Section Patterns ### Navigation Bar ```jsx ``` ### Hero Section (Centered) ```jsx

Now in Beta

Build beautiful websites at the speed of thought

The AI-powered design tool that turns ideas into production-ready pages. No code required.

``` ### Hero Section (Split — Text Left, Image Right) ```jsx

Ship your next product in record time

From prototype to production in minutes. Our platform handles the complexity so you can focus on what matters.

Learn more

``` ### Feature Grid (3 columns) ```jsx

Powerful features for modern teams

Everything you need to design, build, and ship — all in one place.

Real-Time Collaboration

Work together with your team in real time. See cursors, selections, and changes as they happen.

One-Click Deploy

Push to production with a single click. Built-in CI/CD, preview deployments, and rollbacks.

AI Assistant

Built-in AI that understands your codebase. Generate components, fix bugs, and refactor with natural language.

``` ### Testimonial / Social Proof ```jsx

"This tool completely transformed our workflow. We shipped our redesign in two weeks instead of two months."

Sarah Chen VP of Design, Stripe

Trusted by Stripe Vercel Linear Notion Figma

``` ### Pricing Cards ```jsx

Simple, transparent pricing

No surprise fees. Cancel anytime.

Starter

$19 /month

Perfect for individuals and small projects.

Pro

$49 /month

For growing teams that need more power.

Enterprise

$99 /month

For large organizations with custom needs.

``` ### CTA (Call to Action) ```jsx

Ready to get started?

Join thousands of teams already building faster. Start your free trial today.

``` ### Footer ```jsx ``` ### Stats / Metrics Row ```jsx

10K+ Active Users

99.9% Uptime SLA

50ms Avg Latency

Our Story

Lightning Fast