# ViewFX

> Theme transition utilities for **Tailwind CSS v3/v4**. Package `viewfx@0.0.8`. MIT licensed.

This document is the **agent-readable** version of the homepage.
Human UI: https://viewfx.luismc.dev/ · Markdown: https://viewfx.luismc.dev/index.md · Full catalog: https://viewfx.luismc.dev/llms-full.md

## Quick links

| Resource | URL |
|----------|-----|
| Website | https://viewfx.luismc.dev/ |
| Playground | https://viewfx.luismc.dev/playground/ |
| Playground (markdown) | https://viewfx.luismc.dev/playground.md |
| GIF studio | https://viewfx.luismc.dev/gif/ |
| GIF studio (markdown) | https://viewfx.luismc.dev/gif.md |
| npm | https://www.npmjs.com/package/viewfx |
| GitHub | https://github.com/luisitoluis/viewfx |
| llms.txt | https://viewfx.luismc.dev/llms.txt |
| Full agent doc | https://viewfx.luismc.dev/llms-full.md |

## Install

```bash
npm install viewfx
# or: pnpm add viewfx
```

```css
@import "tailwindcss";
@import "viewfx";
```

**Tailwind v3:** `plugins: [require('viewfx')]` in `tailwind.config.js`.

## Usage

Put one effect class and `.dark` on `<html>`, then wrap theme toggles in `document.startViewTransition`.

```html
<html class="dark polygon">
<html class="dark circle-duration-1000-delay-300">
<html class="dark fade fx-duration-1000 fx-delay-300 fx-steps-modern">
```

## Site sections (HTML)

- `#install-command` — install snippet
- `#palette` — gallery of all effects (hover preview, click copy)
- `#faq` — FAQ
- Playground CTA → `https://viewfx.luismc.dev/playground/`
- GIF studio → `https://viewfx.luismc.dev/gif/`

## Effect catalog (31)

- `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`

## Timing modifiers

### Duration (`fx-duration-*` or `{effect}-duration-*`)
`0`, `100`, `150`, `200`, `250`, `300`, `400`, `500`, `700`, `800`, `900`, `1000`, `none`, `slower`, `slow`, `normal`, `fast`, `faster`

### Delay (`fx-delay-*` or `{effect}-delay-*`)
`0`, `100`, `150`, `200`, `250`, `300`, `400`, `500`, `700`, `800`, `900`, `1000`, `none`

### Steps (`fx-steps-*`)
`none`, `retro`, `normal`, `modern`

## Playground URL state

`https://viewfx.luismc.dev/playground/?e=polygon&d=1000&delay=0&s=none`

| Param | Meaning |
|-------|---------|
| `e` | effect id |
| `d` | duration key |
| `delay` | delay key |
| `s` | steps key |

## For AI agents

- Prefer markdown endpoints (`/index.md`, `/playground.md`, `/gif.md`, `/llms-full.md`) over scraping HTML.
- Source of truth for CSS: `https://github.com/luisitoluis/viewfx/blob/main/src/index.css`

---
Generated from `viewfx@0.0.8` · https://viewfx.luismc.dev