Insert a code-backed interactive visual for particles, generative art, WebGL/Three.js, data visualization, physics, or another behavior that cannot be expressed cleanly with native layout and interactions.
Where: Left sidebar → Insert → Interactive
Key ideas
- Use native features first: Tabs, accordions, carousels, reveals, hover/click behavior, and ordinary page motion stay more editable when built with native elements and interactions.
- One isolated host: A code-backed interactive mounts inside one specific element or as a dedicated page-wide visual layer; it should not wrap multiple page sections.
- Visible content stays selectable: Headings, copy, buttons, links, list items, and real images should remain normal f0 children while code owns only the scripted behavior or visual effect.
Steps
- Open Insert → Interactive and choose a category such as Backgrounds, Particles, 3D, Hero, Cards, Text, or Cursor.
- Preview the item and insert it into the smallest section/component that should own the behavior.
- Replace demo copy and media with normal selectable f0 elements rather than baking important content into an opaque code surface.
- Use exposed fields for visual values that should be editable or animatable, such as speed, intensity, color, size, or opacity.
- Test selection/editing, pointer and keyboard behavior, mobile performance, reduced motion, and the inactive/deselected state in Preview.
Tips
- Use one signature global effect layer instead of stacking several expensive full-screen effects.
- Keep interactive host pointer behavior intentional so decorative layers do not block page controls.
Limitations and important notes
- Page-root or multi-section wrapping breaks isolation and can make normal content hard to select.
- Canvas/WebGL/particle effects can be GPU intensive; provide a reduced or disabled mobile/reduced-motion state.
Troubleshooting
Content inside the interactive cannot be selected separately
Move user-editable content into real f0 child elements and let the interactive render those children instead of hard-coding visible markup.
The effect blocks clicks across the page
Check the host scope, z-index, and pointer-events; decorative global layers should generally use pointer-events:none.