Skip to main content
Glama
component.md1.29 kB
# DemoBox Simple colored box with label for demos and placeholders ## Overview The `DemoBox` component is a content component in the chuk-motion library. ## Properties ### `label` - Type: `string` - **Required** - Text label to display ### `color` - Type: `enum` - *Optional* (default: `primary`) - Color theme - Values: `primary`, `accent`, `secondary` ### `start_time` - Type: `float` - *Optional* (default: `None`) - When to show (seconds) ### `duration` - Type: `float` - *Optional* (default: `None`) - How long to show (seconds) ## Example Usage ### Python (MCP Tool) ```python remotion_add_demobox( label="Demo Content", color="primary", start_time=0.0, duration=5.0, ) ``` ### TSX (Generated) The component generates TypeScript/React code that integrates with Remotion. ## Design Tokens This component uses the chuk-motion design token system for consistent styling: - **Colors**: Theme-aware color palettes - **Typography**: Video-optimized font scales - **Motion**: Spring physics and easing curves - **Spacing**: Consistent spacing and safe margins ## Tips & Best Practices ## Related Components Browse other content components in the [component library](../../../README.md). --- *Generated documentation for chuk-motion component library*

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/chrishayuk/chuk-mcp-remotion'

If you have feedback or need assistance with the MCP directory API, please join our Discord server