Car Smoke Page Transition
A cinematic page transition where a speeding car crosses the screen, leaving a smoke trail before transitioning to the next page.
Click to trigger Ferrari drift & smoke transition
Smoke
Size
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/car-smoke-page-transition
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | 'left-to-right' | 'right-to-left' | 'left-to-right' | Direction of car travel |
| carDuration | number | 700 | Duration of car crossing animation in milliseconds |
| carDelay | number | 0 | Delay before car starts moving in milliseconds |
| carSize | 'sm' | 'md' | 'lg' | 'md' | Size of the car (affects scale) |
| smokeDensity | 'off' | 'low' | 'medium' | 'high' | 'medium' | Density of smoke particles emitted |
| smokeLifetime | number | 1200 | Lifetime of smoke particles in milliseconds |
| showSpeedLines | boolean | true | Whether to show speed lines effect behind the car |
| pageTransitionDelay | number | 550 | Delay before page transition overlay starts in milliseconds |
| pageTransitionDuration | number | 350 | Duration of page transition overlay fade in milliseconds |
| resetDelay | number | 300 | Delay before resetting to idle after transition completes in milliseconds |
| onTransitionComplete | () => void | undefined | Callback fired when transition completes (call navigate() here) |
| children | ReactNode | undefined | The trigger element (typically a Button) |
| className | string | undefined | Additional Tailwind classes merged into the root |