Fluid Container
A React component that smoothly animates its height and width to match content changes. Perfect for accordions, modals, and any UI where you want fluid transitions instead of jarring jumps. Uses a custom hook to track size changes and applies CSS transitions for butter-smooth animations.
You can use the debug buttons in each example to toggle the visual state of the containers.
Basic Fluid Container
Container automatically animates its height and width to match content changes. Click the button to see smooth size transitions.
Simple Form Modal
Real-world use case: modal dialogs that smoothly resize as users progress through steps. No jarring jumps—just fluid size transitions.
Nested Fluid Containers
Demonstrates handling of nested containers. Parent fluid sizing is disabled to prevent performance issues—only leaf nodes animate. Expand sections to see independent animations.