# BeforeAfterSlider
Interactive before/after comparison slider with animated handle, customizable labels, and multiple handle styles
## Overview
The `BeforeAfterSlider` component is a layout component in the chuk-motion library.
## Properties
## Example Usage
### Python (MCP Tool)
```python
```
### 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
- Respect platform safe margins
- Test with actual content before finalizing
- Consider aspect ratio and target platform
- Balance content density with readability
## Related Components
Browse other layout components in the [component library](../../../README.md).
---
*Generated documentation for chuk-motion component library*