# Flip Modal

CSS modal motion variants with tiny state triggers

## Artifact

- ID: flip-modal
- Runtime: HTML/CSS/JS
- Preview: Source-matched preview
- Manifest schema: 1
- Packages: None
- Tags: #modal, #css-motion, #css-keyframes, #3d-transform, #zero-dependency, #source-matched, #reduced-motion
- Source: /components/flip-modal/code
- Manifest: /components/flip-modal/manifest
- Preview route: /components/flip-modal/preview
- Download: /components/flip-modal/download

## Files

- effects/flip-modal/flip-modal.html (html, 1869 bytes, sha256 6af5b5cdc76baad1174893df86f2ac3476bc54500e57b25c492b0cd7aae43e05)
- effects/flip-modal/flip-modal.css (css, 10473 bytes, sha256 8fb3a6e4ae18fd9fbdd82dfab31a8b5879bcdd83691d8f11a6ece4068a00d916)
- effects/flip-modal/flip-modal.js (js, 1689 bytes, sha256 e44e67f105f1040841e63096aeb1eb575c7962465ce34002efbc523b8707814e)

## Assets

- None

## Integration Steps

1. Copy the HTML, CSS, and JavaScript files listed below.
2. Use the CSS file as the styling source for the copied markup.
3. Load the JavaScript after the markup; it only orchestrates state for the effect.
4. Keep the `prefers-reduced-motion` rules intact when adapting the effect.
5. The preview route is source-matched, so the visible effect is backed by the same files listed here.

## Motion And Performance

- Motion types: keyframes, 3d-transform, clip-path, backdrop-filter
- Animated properties: transform, opacity, clip-path, backdrop-filter
- Reduced motion: yes
- All entrance and exit motion is compositor-friendly transform and opacity.
- Portal keeps a clip-path iris and the holo sheen sweeps via transform — no per-frame filter or gradient repaints.
- JavaScript only changes data attributes and dispatches state events.