Temporal Physics

Defining the weight and momentum of motion. This laboratory investigates the physical properties of a transition—tuning duration, easing functions, and spring dynamics to achieve organic, believable movement.

Lab 1 - Simple Fade In/Out Animation

Create a component that fades in when it mounts and fades out when it unmounts.

Create a component called FadeComponent.
Use the motion.div from Motion to create a div that fades in and out.
Use Tailwind CSS classes to style the div(e.g., padding, background color).
Add a button to toggle the visibility of FadeComponent.