> ## Documentation Index
> Fetch the complete documentation index at: https://lunagraph.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Custom controls
> Tune component behavior with controls on the canvas.
Tune real behavior live on the canvas. Build the exact controls your component needs, instead of digging through code.
### On this page
* [Overview](#overview)
* [What are props?](#what-are-props)
* [Video walkthrough](#video-walkthrough)
* [Adjust a control](#adjust-a-control)
* [Ask the AI to expose a prop](#ask-the-ai-to-expose-a-prop)
## 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
1. **Select the component.** Select a component that already exposes props. Its controls appear in the properties panel.
2. **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.
You don't need to describe the implementation. A request like "expose distortion as a prop" is enough. Ask the AI to use whole numbers instead of decimals for now.
1. **Describe what you want.** Tell the AI what you want to adjust, like "add a control for how long the card pauses on hover.”
2. **Refine the result.** Once the control appears, adjust it until the component feels right.