On this page
Overview
Components expose their props as controls, so you can tune blur, glow, delay, position, timing, and other values on the canvas. Every prop appears as a control automatically. If a value is missing, the component doesn’t expose it as a prop yet. Ask the AI to add it. Once the control appears, the AI’s done its part, tuning it to look right is still up to you.What are props?
A prop is a value that a component exposes for customization, such as a button’s color or size, or a shader’s glow, blur, or delay. Instead of changing that value in code, a custom control puts it on the canvas as a slider, toggle, or numeric input you can adjust directly.Video walkthrough
Adjust a control
- Select the component. Select a component that already exposes props. Its controls appear in the properties panel.
- Adjust the values. Change the blur, delay, position, or any other value the component exposes. The canvas updates as you work.
Ask the AI to expose a prop
If a value doesn’t appear in the properties panel, ask the AI to expose it as a prop, useful any time you want to dial something in by feel, like how strong a hover glow should be. You can create controls for:- Motion: Pause, play, scrub, or delay an animation.
- Shader values: Tune glow, blur, bleed, or noise.
- Transitions: Change easing, duration, or timing.
- Toggles: Show or hide part of a component, or switch between states.
- Position and size: Move, resize, or rotate an element.
- Describe what you want. Tell the AI what you want to adjust, like “add a control for how long the card pauses on hover.”
- Refine the result. Once the control appears, adjust it until the component feels right.