theme-ripple


Smooth theme transitions for Vue and React using the View Transition API.

Live Demo

!Demo
!Demo

✨ Features

- 🎨 Smooth Animations - Beautiful circular/directional transitions powered by View Transition API
- ⚛️ Vue & React - First-class support for both frameworks
- 🧭 8 Directions - Animate from any edge or corner
- 🎛️ Customizable - Control duration, easing, and animation origin
- 🌐 System Theme - Auto-detect and sync with OS theme preference
- 📦 Lightweight - No dependencies, tree-shakeable

📦 Installation

``bash


npm

npm install @imccc/theme-ripple

pnpm

pnpm add @imccc/theme-ripple

yarn

yarn add @imccc/theme-ripple
`

🚀 Quick Start

$3

`vue



`

$3

`tsx
import { useState, useCallback } from 'react'
import { useThemeRipple } from '@imccc/theme-ripple/react'

function App() {
const [isDark, setIsDarkState] = useState(false)

const setIsDark = useCallback((dark: boolean) => {
setIsDarkState(dark)
document.documentElement.classList.toggle('dark', dark)
}, [])

const { toggleTheme, isTransitioning, isSupported } = useThemeRipple(isDark, setIsDark, true)

const handleClick = (event: React.MouseEvent) => {
toggleTheme({
x: event.clientX,
y: event.clientY,
duration: 400,
animation: 'ease-out'
})
}

return (

Toggle Theme {isSupported ? '(Animated)' : '(Instant)'}

)
}
`

📖 API Reference

$3

| Parameter | Type | Description |
|-----------|------|-------------|
| isDark | Ref (Vue) / boolean (React) | Current dark mode state |
| setIsDark | (dark: boolean) => void | Function to update dark mode state |
| isAutoChangeTheme | boolean | Auto-sync with system theme (default: true) |

Returns:

| Property | Type | Description |
|----------|------|-------------|
| toggleTheme | (options) => void | Function to trigger theme transition |
| isTransitioning | Ref (Vue) / boolean (React) | Whether a transition is in progress |
| isSupported | Ref (Vue) / boolean (React) | Whether the browser supports View Transition API |

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| x | number | - | X coordinate of animation origin |
| y | number | - | Y coordinate of animation origin |
| duration | number | 400 | Animation duration in ms |
| animation | string | 'ease-in' | CSS easing function |
| direction | Direction | - | Preset direction (overrides x/y) |


$3

| Value | Description |
|-------|-------------|
| 'top' | Expand from top center |
| 'bottom' | Expand from bottom center |
| 'left' | Expand from left center |
| 'right' | Expand from right center |
| 'top-left' | Expand from top-left corner |
| 'top-right' | Expand from top-right corner |
| 'bottom-left' | Expand from bottom-left corner |
| 'bottom-right'` | Expand from bottom-right corner |

🌐 Browser Support

This library uses the View Transition API. For unsupported browsers, the theme will change immediately without animation.

📄 License

MIT © ImChrisChen