ViewFX
v0.0.8
31+ ready-to-use theme transitions for Tailwind CSS. Zero config, one class on <html>.
Install and use **viewfx** in this project.
## What it is
A Tailwind CSS plugin of 31 dark/light **theme transitions** on the native View Transitions API. Put one effect class on `<html>` and wrap the theme toggle in `document.startViewTransition`. Tailwind v4 uses a CSS import; Tailwind v3 uses `require('viewfx')`.
## Install the package
```bash
npm install viewfx
# or: pnpm add viewfx / yarn add viewfx / bun add viewfx
```
Tailwind CSS v4 (global CSS):
```css
@import "tailwindcss";
@import "viewfx";
```
Tailwind CSS v3:
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
plugins: [
require('viewfx')
]
}
```
## Usage
Put the effect and `.dark` on `<html>`. Timing can live in the same class or as `fx-*` utilities.
```html
<html class="dark circle">
<html class="dark circle-duration-1000-delay-300">
<html class="dark polygon fx-duration-1000 fx-delay-300 fx-steps-modern">
```
```js
const switchTheme = () =>
document.documentElement.classList.toggle('dark')
document.startViewTransition
? document.startViewTransition(switchTheme)
: switchTheme()
```
- Theme class: `.dark` on `<html>` (the `polygon` wipe reverses in dark).
- Timing: `circle-duration-1000`, `circle-duration-1000-delay-300`, or `fx-duration-1000`, `fx-delay-300`, `fx-steps-modern`.
- `prefers-reduced-motion: reduce` still toggles the theme but skips the wipe. Browsers without the View Transitions API switch instantly.
Effects: `circle`, `circle-blur`, `polygon`, `corner-tl`, `corner-tr`, `corner-bl`, `corner-br`, `iris`, `diamond`, `hexagon`, `square`, `mosaic`, `soft`, `heart`, `expand`, `split`, `shutter`, `ink`, `spiral`, `slide-right`, `slide-left`, `slide-up`, `slide-down`, `venetian`, `glitch`, `slide`, `lift`, `zoom`, `rotate`, `fade`, `dissolve`.
## Documentation
- Catalogue: https://viewfx.luismc.dev
- Playground: https://viewfx.luismc.dev/playground
- GIF studio: https://viewfx.luismc.dev/gif
- GitHub: https://github.com/luisitoluis/viewfx
- npm: https://www.npmjs.com/package/viewfx
- README: https://github.com/luisitoluis/viewfx#readme
Please install the package, wire the v4 CSS import (or the v3 plugin), put one effect class on `<html>`, and wrap theme toggles in `document.startViewTransition`. Prefer the README and playground over scraping the HTML catalogue.
npm install viewfx
@import 'tailwindcss'; @import 'viewfx';
/** @type {import('tailwindcss').Config} */ module.exports = { plugins: [ require('viewfx') ] }
Effect Collection
31 utilities. Hover to preview, click to copy.
Frequently Asked Questions
Everything you need to know about the ViewFX Tailwind plugin.
What is ViewFX?
ViewFX is a Tailwind CSS plugin for theme toggles. It ships 31 dark/light transitions on the native View Transitions API. Put one class on <html> and wrap your theme toggle in document.startViewTransition — no custom keyframes required.
How do I install it?
Run pnpm add viewfx (or npm / yarn / bun), then add @import 'tailwindcss'; and @import 'viewfx'; to your global CSS for Tailwind v4.
Does it work with Tailwind CSS v3 and v4?
Yes. Tailwind v4 uses the CSS import. Tailwind v3 registers the same utilities with plugins: [require("viewfx")] in tailwind.config.js.
How do I use an effect class?
Add a class such as circle, fade, or polygon to <html>. Timing can share that class (circle-duration-1000-delay-300) or use fx-duration-*, fx-delay-*, and fx-steps-*. The theme class is expected to be .dark on the same element.
Does the plugin toggle light and dark mode by itself?
No. You still toggle the .dark class. ViewFX only styles the view-transition snapshots between the two themes. Browsers without the API skip the animation and switch instantly.
What happens with reduced motion?
prefers-reduced-motion: reduce turns off the wipe. The theme still changes; the motion does not run.
Is it free and open source?
Yes. The project is MIT licensed, free to use commercially, and open for contributions on GitHub at luisitoluis/viewfx.