feat: Animation & Transition Docs & Examples (#2)

* feat: updated core bindings & implemented shift plugin
* added hash routing doc
* feat: View Transitions API integration
* feat: completed animations with docs & demo
* chore: bump to 0.4.0

ROADMAP.md

···
 | v0.2.0  |   ✓   | [Reactive Attributes & Event Modifiers](#reactive-attributes--event-modifiers)   |
 | v0.3.0  |   ✓   | [Global State](#global-state)                                                    |
 | v0.4.0  |       | [Animation & Transitions](#animation--transitions)                               |
+|         |       | [History API Routing Plugin](#history-api-routing-plugin)                        |
 | v0.5.0  |       | [Persistence & Offline](#persistence--offline)                                   |
 |         |       | [Background Requests & Reactive Polling](#background-requests--reactive-polling) |
 | v0.6.0  |       | [Navigation & History Management](#navigation--history-management)               |
···
             - Preloading of linked resources on hover or idle
     - `data-volt-url` for declarative history updates
         - View Transition API integration for animated route changes
+
+### History API Routing Plugin
+
+**Goal:** Deliver a first-class path-based router that leverages the History API while staying signal-driven.
+**Outcome:** Volt apps can opt into clean URLs (no hash) with back/forward support, nested segments, and SSR-friendly hydration.
+**Deliverables:**
+    - `data-volt-url="history:signal"` mode with path + search preservation and optional base path configuration
+    - Route parsing utilities for dynamic params (e.g. `/blog/:slug`) and programmatic redirects
+    - Scroll restoration hooks and focus management aligned with `navigation` and `popstate` events
+    - Integration tests covering pushState navigation, deep links, and server-rendered bootstraps
+    - Documentation updates in `docs/usage/routing.md` contrasting hash vs. history strategies
 
 ### Inspector & Developer Tools
 

docs/.vitepress/config.ts

···
-import { defineConfig } from "vitepress";
+import { DefaultTheme, defineConfig } from "vitepress";
+import pkg from "../package.json" assert { type: "json" };
 import { u } from "./utils";
+
+const repoURL = "https://github.com/stormlightlabs/volt";
 
 /**
  * @see https://vitepress.dev/reference/site-config
···
   base: "/volt/",
   appearance: "dark",
   themeConfig: {
-    nav: [{ text: "Home", link: "/" }, { text: "Overview", link: "/overview" }, { text: "CSS", link: "/css/volt-css" }],
+    search: { provider: "local" },
+    nav: [
+      { text: "Home", link: "/" },
+      { text: "Overview", link: "/overview" },
+      { text: "CSS", link: "/css/volt-css" },
+      {
+        text: "Version",
+        items: [{ text: pkg.version, link: `${repoURL}/releases/tag/v${pkg.version}` }, {
+          text: "Contributing",
+          link: `${repoURL}/blob/main/CONTRIBUTING.md`,
+        }, { text: "Changelog", link: "${repoURL}/blob/main/README.md" }],
+      },
+    ],
     sidebar: [
       {
         text: "Getting Started",
-        items: [{ text: "Overview", link: "/overview" }, { text: "Installation", link: "/installation" }],
+        items:
+          ([{ text: "Overview", link: "/overview" }, {
+            text: "Installation",
+            link: "/installation",
+          }] as DefaultTheme.SidebarItem[]).concat(...u.scanDir("usage", "/usage")),
       },
       {
         text: "Core Concepts",
···
           { text: "Animations & Transitions", link: "/animations" },
         ],
       },
-      { text: "Tutorials", items: [{ text: "Counter", link: "/usage/counter" }] },
+      { text: "Tutorials", collapsed: false, items: u.scanDir("usage", "/usage") },
       {
         text: "CSS",
         collapsed: false,
         items: [{ text: "Volt CSS", link: "/css/volt-css" }, { text: "Reference", link: "/css/semantics" }],
+        docFooterText: "Auto-generated CSS Docs",
       },
       { text: "Specs", collapsed: true, items: u.scanDir("spec", "/spec") },
       {
···
         items: u.scanDir("api", "/api"),
         docFooterText: "Auto-generated API Docs",
       },
-      {
-        text: "Internals",
-        collapsed: false,
-        items: u.scanDir("internals", "/internals"),
-        docFooterText: "Auto-generated CSS Docs",
-      },
+      { text: "Internals", collapsed: false, items: u.scanDir("internals", "/internals") },
     ],
-    socialLinks: [{ icon: "github", link: "https://github.com/stormlightlabs/volt" }],
+    socialLinks: [{ icon: "github", link: repoURL }, {
+      icon: "bluesky",
+      link: "https://bsky.app/profile/stormlightlabs.org",
+    }],
   },
 });

docs/animations.md

···
 # Animations & Transitions
+
+VoltX provides a powerful, declarative animation system through two complementary plugins:
+
+1. **surge** for enter/leave transitions and
+2. **shift** for CSS keyframe animations.
+
+Both integrate with the reactivity system and respect user accessibility preferences.
+
+## Quick Start
+
+Add transitions to any element with `data-volt-if` or `data-volt-show` by adding `data-volt-surge` with a preset name:
+
+```html
+<div data-volt-if="isVisible" data-volt-surge="fade">
+  Content fades in and out smoothly
+</div>
+```
+
+That's it! The surge plugin automatically hooks into the element's lifecycle, applying transitions when it appears or disappears.
+
+## Built-in Presets
+
+VoltX includes ready-to-use transition presets:
+
+| Preset          | Description                       |
+| --------------- | --------------------------------- |
+| **fade**        | Simple opacity transition         |
+| **slide-up**    | Sliding motion with opacity       |
+| **slide-down**  |                                   |
+| **slide-left**  |                                   |
+| **slide-right** |                                   |
+| **scale**       | Subtle scale effect with opacity  |
+| **blur**        | Blur effect combined with opacity |
+
+All presets are designed with smooth, professional timing curves and 300ms duration by default.
+
+## Surge Plugin: Enter/Leave Transitions
+
+The surge plugin provides two modes of operation: automatic (with if/show bindings) and explicit (signal-based).
+
+### Automatic Mode
+
+When used with `data-volt-if` or `data-volt-show`, surge automatically manages the element's visibility transitions. The element smoothly animates in when the condition becomes true and animates out before removal.
+
+### Explicit Mode
+
+Watch any signal by providing a signal path. The element will transition in/out based on the signal's truthiness:
+
+```html
+<div data-volt-surge="showPanel:slide-down">
+  Panel slides down when showPanel is true
+</div>
+```
+
+### Duration and Delay Modifiers
+
+Override preset timing using dot notation:
+
+```html
+<!-- 500ms duration -->
+<div data-volt-surge="fade.500">...</div>
+
+<!-- 600ms duration, 100ms delay -->
+<div data-volt-surge="slide-down.600.100">...</div>
+```
+
+### Granular Control
+
+Specify different transitions for enter and leave phases:
+
+```html
+<div
+  data-volt-if="show"
+  data-volt-surge:enter="slide-down.400"
+  data-volt-surge:leave="fade.200">
+  Slides in, fades out
+</div>
+```
+
+## Shift Plugin: Keyframe Animations
+
+The shift plugin applies CSS keyframe animations, perfect for attention-grabbing effects and continuous animations.
+
+### Built-in Animations
+
+| Animation  | Description                       |
+| ---------- | --------------------------------- |
+| **bounce** | Quick bounce effect               |
+| **shake**  | Horizontal shake motion           |
+| **pulse**  | Subtle pulsing scale (continuous) |
+| **spin**   | Full rotation (continuous)        |
+| **flash**  | Opacity flash effect              |
+
+### One-Time Animations
+
+Apply animation when element mounts:
+
+```html
+<button data-volt-shift="bounce">Bounces on mount</button>
+```
+
+### Signal-Triggered Animations
+
+Trigger animations based on signal changes:
+
+```html
+<div data-volt-shift="error:shake.600.2">
+  Shakes twice when error becomes truthy
+</div>
+```
+
+The syntax supports duration and iteration overrides: `animationName.duration.iterations`
+
+## View Transitions API
+
+VoltX automatically uses the View Transitions API when available, providing native browser-level transitions for ultra-smooth visual updates.
+The system gracefully falls back to CSS transitions on unsupported browsers.
+
+For advanced use cases, manually trigger view transitions using `startViewTransition` or `namedViewTransition` from the programmatic API.
+
+## Custom Presets (Programmatic Mode)
+
+Register custom transitions for reuse across your application:
+
+```javascript
+import { registerTransition } from "voltx.js";
+
+registerTransition("custom-slide", {
+  enter: {
+    from: { opacity: 0, transform: "translateX(-100px)" },
+    to: { opacity: 1, transform: "translateX(0)" },
+    duration: 400,
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  },
+  leave: {
+    from: { opacity: 1, transform: "translateX(0)" },
+    to: { opacity: 0, transform: "translateX(100px)" },
+    duration: 300,
+    easing: "ease-out",
+  },
+});
+```
+
+Similarly, register custom shift animations with `registerAnimation`.
+
+## Easing Functions
+
+Surge supports standard CSS easing values plus extended named easings:
+
+- Standard: `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`
+- Extended: `ease-in-sine`, `ease-out-quad`, `ease-in-out-cubic`, `ease-in-back`
+
+Custom cubic-bezier values are also supported.
+
+## Integration with Bindings
+
+- With `data-volt-if`, surge defers element insertion/removal until transitions complete, preventing visual glitches.
+- With `data-volt-show`, surge manages display property changes around the transition lifecycle.
+- Simply add `data-volt-surge` to elements already using these bindings.
+
+## Accessibility
+
+The animation system automatically respects the `prefers-reduced-motion` media query. When enabled, animations are skipped or significantly reduced, instantly applying final states instead.
+
+Both surge and shift plugins honor this setting by default, ensuring your application remains accessible without additional configuration.

docs/overview.md

···
 outline: deep
 ---
 
-# Framework Overview
+# Overview
 
 VoltX is a lightweight, hypermedia based reactive framework for building declarative UIs.
 
···
 
 ## Browser Support
 
-Modern browsers with support for:
+Modern browsers (Chrome 90+, Firefox 88+, Safari 14+) with support for:
 
 - ES modules
 - Proxy objects
 - CSS custom properties
-
-Chrome 90+, Firefox 88+, Safari 14+

docs/package.json

···
 {
   "name": "@voltx/docs",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": true,
   "type": "module",
   "scripts": { "dev": "vitepress dev", "build": "vitepress build", "preview": "vitepress preview" },

docs/usage/routing.md

···
+# Routing
+
+Client-side routing lets VoltX applications feel like multi-page sites without full page reloads.
+The `url` plugin keeps a signal in sync with the browser URL so your application can react declaratively to route changes.
+This guide walks through building a hash-based router that swaps entire page sections while preserving the advantages
+of VoltX's signal system.
+
+## Why?
+
+- **Zero reloads:** Route changes update `window.location.hash` via `history.pushState`, so the browser history stack is maintained while the document stays mounted and stateful widgets keep their values.
+- **Shareable URLs:** Users can refresh or share a link such as `/#/pricing` and land directly on the same view.
+- **Declarative rendering:** Routing is just another signal; templates choose what to display with conditional bindings like `data-volt-if` or `data-volt-show`.
+- **Simple integration:** No extra router dependency is required—register the plugin once and opt-in per signal.
+
+> The plugin also supports synchronising signals with query parameters (`read:` and `sync:` modes).
+> For multi-page navigation the `hash:` mode is the simplest option because it avoids server configuration and works on static hosting.
+
+## How?
+
+1. Install Volt normally (see [Installation](../installation.md)).
+2. Register the plugin before calling `charge()` or `mount()`:
+
+    ```html
+    <script type="module">
+      import {
+        charge,
+        registerPlugin,
+        urlPlugin,
+      } from 'https://unpkg.com/voltx.js@latest/dist/volt.js';
+
+      registerPlugin('url', urlPlugin);
+      charge();
+    </script>
+    ```
+
+3. In your markup, opt a signal into hash synchronisation with `data-volt-url="hash:signalName"`.
+
+## Building a multi-page shell
+
+The example below delivers a three-page marketing site entirely on the client. Each "page" is a section that only renders
+when the current route matches its slug.
+
+```html
+<main
+  data-volt
+  data-volt-state='{"route": "home"}'
+  data-volt-url="hash:route">
+  <nav>
+    <button data-volt-class:active="route === 'home'" data-volt-on-click="route.set('home')">
+      Home
+    </button>
+    <button data-volt-class:active="route === 'pricing'" data-volt-on-click="route.set('pricing')">
+      Pricing
+    </button>
+    <button data-volt-class:active="route === 'about'" data-volt-on-click="route.set('about')">
+      About
+    </button>
+  </nav>
+
+  <section data-volt-if="route === 'home'">
+    <h1>Volt</h1>
+    <p>A lightning-fast reactive runtime for the DOM.</p>
+  </section>
+
+  <section data-volt-if="route === 'pricing'">
+    <h1>Pricing</h1>
+    <ul>
+      <li>Starter — $0</li>
+      <li>Team — $29</li>
+      <li>Enterprise — Contact us</li>
+    </ul>
+  </section>
+
+  <section data-volt-if="route === 'about'">
+    <h1>About</h1>
+    <p>Learn more about the Volt runtime and ecosystem.</p>
+  </section>
+
+  <section data-volt-if="route !== 'home' && route !== 'pricing' && route !== 'about'">
+    <h1>Not found</h1>
+    <p data-volt-text="'No page named \"' + route + '\"'"></p>
+    <button data-volt-on-click="route.set('home')">Return home</button>
+  </section>
+</main>
+```
+
+### How it works
+
+- On first mount, the plugin reads `window.location.hash` and updates the `route` signal (defaulting to `"home"` if empty).
+- Clicking navigation buttons calls `route.set(...)`, which updates the signal and immediately pushes the new hash to history.
+  The hash-change event also keeps the signal in sync when the user clicks the browser back button.
+- Each section uses `data-volt-if` to opt-in to rendering when the `route` value matches.
+  Volt removes sections that no longer match, so each "page" has a distinct DOM subtree.
+
+You can style the `"active"` class however you like; it toggles purely through declarative class bindings.
+
+## Linking with anchors
+
+Prefer plain `<a>` elements when appropriate so the browser shows the target hash in tooltips and lets users open the route in new tabs:
+
+```html
+<a href="#pricing" data-volt-on-click="route.set('pricing')">Pricing</a>
+```
+
+Setting `href="#pricing"` ensures non-JavaScript fallbacks still land on the right section, while the click handler keeps
+the signal aligned with the hash plugin.
+
+## Nested & Computed Routes
+
+Because the route is just a string signal, you can derive extra information using computed signals or watchers:
+
+```html
+<div
+  data-volt
+  data-volt-state='{"route": "home"}'
+  data-volt-url="hash:route"
+  data-volt-computed:segments="route.split('/')">
+  <p data-volt-text="'Section: ' + segments[0]"></p>
+  <p data-volt-if="segments.length > 1" data-volt-text="'Item: ' + segments[1]"></p>
+</div>
+```
+
+Use this pattern to build nested routes like `#/blog/introducing-volt`. Parse the segments in a computed signal and update child components accordingly.
+
+For richer logic (e.g., mapping slugs to component functions), register a handler in `data-volt-methods` or mount with the programmatic API.
+This would allow something like a switch statement or usage of a look up of route definitions in a collection.
+
+## Preserving State
+
+Client-side routing works best when page-level state lives alongside the route signal.
+Volt keeps signals alive as long as their elements remain mounted, so consider nesting pages inside `data-volt-if` blocks that wrap the entire section.
+When you need to reset state upon navigation, call `.set()` explicitly inside your route change handlers or watch the `route` signal and perform cleanup in `ctx.addCleanup`.
+
+## Query Params
+
+Hash routing is ideal for static sites, but you can combine it with query parameter syncing.
+
+For example:
+
+```html
+<div
+  data-volt
+  data-volt-state='{"route": "home", "preview": false}'
+  data-volt-url="hash:route">
+  <span hidden data-volt-url="sync:preview"></span>
+  <!-- ... -->
+</div>
+```
+
+Now `#/pricing?preview=true` keeps both the route and a feature flag in sync with the URL.
+Add the extra `data-volt-url="sync:preview"` binding on a child element when you need more than one signal to participate in URL synchronisation.
+
+## Progressive Enhancement
+
+- Always provide semantic HTML in each section so the site remains usable without JavaScript or when crawled.
+- Consider prefetching data when a link becomes visible: attach a watcher to `route` and trigger fetch logic from the programmatic API.
+- Use `scrollPlugin` for auto-scrolling on navigation if you have tall pages (`data-volt-scroll="route"`).

lib/deno.json

···
 {
   "name": "@voltx/core",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "license": "MIT",
   "exports": { ".": "./src/index.ts", "./debug": "./src/debug.ts", "./css": "./dist/voltx.css" },
   "imports": {

lib/jsr.json

···
 {
   "name": "@voltx/core",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "license": "MIT",
   "exports": { ".": "./src/index.ts", "./debug": "./src/debug.ts" },
   "publish": { "include": ["src", "README.md", "LICENSE"] }

lib/package.json

···
 {
   "name": "voltx.js",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "A lightweight reactive framework for declarative UIs",
   "type": "module",
   "author": "Owais Jamil",

lib/src/core/binder.ts

···
  * Binder system for mounting and managing Volt.js bindings
  */
 
+import { executeSurgeEnter, executeSurgeLeave, hasSurge } from "$plugins/surge";
 import type { Nullable, Optional } from "$types/helpers";
 import type {
   BindingContext,
···
 /**
  * Bind data-volt-show to toggle element visibility via CSS display property.
  * Unlike data-volt-if, this keeps the element in the DOM and toggles display: none.
+ * Integrates with surge plugin for smooth transitions when available.
  */
 function bindShow(ctx: BindingContext, expr: string): void {
   const el = ctx.element as HTMLElement;
   const originalInlineDisplay = el.style.display;
+  const hasSurgeTransition = hasSurge(el);
+
+  if (!hasSurgeTransition) {
+    const update = () => {
+      const value = evaluate(expr, ctx.scope);
+      const shouldShow = Boolean(value);
+
+      if (shouldShow) {
+        el.style.display = originalInlineDisplay;
+      } else {
+        el.style.display = "none";
+      }
+    };
+
+    updateAndRegister(ctx, update, expr);
+    return;
+  }
+
+  let isVisible = el.style.display !== "none";
+  let isTransitioning = false;
 
   const update = () => {
     const value = evaluate(expr, ctx.scope);
     const shouldShow = Boolean(value);
 
-    if (shouldShow) {
-      el.style.display = originalInlineDisplay;
-    } else {
-      el.style.display = "none";
+    if (shouldShow === isVisible || isTransitioning) {
+      return;
     }
+
+    isTransitioning = true;
+
+    requestAnimationFrame(() => {
+      void (async () => {
+        try {
+          if (shouldShow) {
+            el.style.display = originalInlineDisplay;
+            await executeSurgeEnter(el);
+            isVisible = true;
+          } else {
+            await executeSurgeLeave(el);
+            el.style.display = "none";
+            isVisible = false;
+          }
+        } finally {
+          isTransitioning = false;
+        }
+      })();
+    });
   };
 
   updateAndRegister(ctx, update, expr);
···
   }
 
   const { itemName, indexName, arrayPath } = parsed;
-  const template = ctx.element as HTMLElement;
-  const parent = template.parentElement;
+  const templ = ctx.element as HTMLElement;
+  const parent = templ.parentElement;
 
   if (!parent) {
     console.error("data-volt-for element must have a parent");
···
   }
 
   const placeholder = document.createComment(`for: ${expr}`);
-  template.before(placeholder);
-  template.remove();
+  templ.before(placeholder);
+  templ.remove();
 
   const renderedElements: Element[] = [];
   const renderedCleanups: CleanupFunction[] = [];
···
     }
 
     for (const [index, item] of arrayValue.entries()) {
-      const clone = template.cloneNode(true) as Element;
+      const clone = templ.cloneNode(true) as Element;
       delete (clone as HTMLElement).dataset.voltFor;
 
       const itemScope: Scope = { ...ctx.scope, [itemName]: item };
···
 /**
  * Bind data-volt-if to conditionally render an element. Supports data-volt-else on the next sibling element.
  * Subscribes to condition signal and shows/hides elements when condition changes.
+ * Integrates with surge plugin for smooth enter/leave transitions when available.
  */
 function bindIf(ctx: BindingContext, expr: string): void {
-  const ifTemplate = ctx.element as HTMLElement;
-  const parent = ifTemplate.parentElement;
+  const ifTempl = ctx.element as HTMLElement;
+  const parent = ifTempl.parentElement;
 
   if (!parent) {
     console.error("data-volt-if element must have a parent");
     return;
   }
 
-  let elseTemplate: Optional<HTMLElement>;
-  let nextSibling = ifTemplate.nextElementSibling;
+  let elseTempl: Optional<HTMLElement>;
+  let nextSibling = ifTempl.nextElementSibling;
 
   while (nextSibling && nextSibling.nodeType !== 1) {
     nextSibling = nextSibling.nextElementSibling;
   }
 
   if (nextSibling && Object.hasOwn((nextSibling as HTMLElement).dataset, "voltElse")) {
-    elseTemplate = nextSibling as HTMLElement;
-    elseTemplate.remove();
+    elseTempl = nextSibling as HTMLElement;
+    elseTempl.remove();
   }
 
   const placeholder = document.createComment(`if: ${expr}`);
-  ifTemplate.before(placeholder);
-  ifTemplate.remove();
+  ifTempl.before(placeholder);
+  ifTempl.remove();
+
+  const ifHasSurge = hasSurge(ifTempl);
+  const elseHasSurge = elseTempl ? hasSurge(elseTempl) : false;
+  const anySurge = ifHasSurge || elseHasSurge;
 
   let currentElement: Optional<Element>;
   let currentCleanup: Optional<CleanupFunction>;
   let currentBranch: Optional<"if" | "else">;
+  let isTransitioning = false;
 
   const render = () => {
     const condition = evaluate(expr, ctx.scope);
     const shouldShow = Boolean(condition);
 
-    const targetBranch = shouldShow ? "if" : (elseTemplate ? "else" : undefined);
+    const targetBranch = shouldShow ? "if" : (elseTempl ? "else" : undefined);
 
-    if (targetBranch === currentBranch) {
+    if (targetBranch === currentBranch || isTransitioning) {
       return;
     }
 
-    if (currentCleanup) {
-      currentCleanup();
-      currentCleanup = undefined;
+    if (!anySurge) {
+      if (currentCleanup) {
+        currentCleanup();
+        currentCleanup = undefined;
+      }
+      if (currentElement) {
+        currentElement.remove();
+        currentElement = undefined;
+      }
+
+      if (targetBranch === "if") {
+        currentElement = ifTempl.cloneNode(true) as Element;
+        delete (currentElement as HTMLElement).dataset.voltIf;
+        currentCleanup = mount(currentElement, ctx.scope);
+        placeholder.before(currentElement);
+        currentBranch = "if";
+      } else if (targetBranch === "else" && elseTempl) {
+        currentElement = elseTempl.cloneNode(true) as Element;
+        delete (currentElement as HTMLElement).dataset.voltElse;
+        currentCleanup = mount(currentElement, ctx.scope);
+        placeholder.before(currentElement);
+        currentBranch = "else";
+      } else {
+        currentBranch = undefined;
+      }
+      return;
     }
-    if (currentElement) {
-      currentElement.remove();
-      currentElement = undefined;
-    }
+
+    isTransitioning = true;
+
+    requestAnimationFrame(() => {
+      void (async () => {
+        try {
+          if (currentElement) {
+            const currentEl = currentElement as HTMLElement;
+            const currentHasSurge = currentBranch === "if" ? ifHasSurge : elseHasSurge;
+
+            if (currentHasSurge) {
+              await executeSurgeLeave(currentEl);
+            }
+
+            if (currentCleanup) {
+              currentCleanup();
+              currentCleanup = undefined;
+            }
+            currentElement.remove();
+            currentElement = undefined;
+          }
+
+          if (targetBranch === "if") {
+            currentElement = ifTempl.cloneNode(true) as Element;
+            delete (currentElement as HTMLElement).dataset.voltIf;
+            placeholder.before(currentElement);
+
+            if (ifHasSurge) {
+              await executeSurgeEnter(currentElement as HTMLElement);
+            }
+
+            currentCleanup = mount(currentElement, ctx.scope);
+            currentBranch = "if";
+          } else if (targetBranch === "else" && elseTempl) {
+            currentElement = elseTempl.cloneNode(true) as Element;
+            delete (currentElement as HTMLElement).dataset.voltElse;
+            placeholder.before(currentElement);
+
+            if (elseHasSurge) {
+              await executeSurgeEnter(currentElement as HTMLElement);
+            }
 
-    if (targetBranch === "if") {
-      currentElement = ifTemplate.cloneNode(true) as Element;
-      delete (currentElement as HTMLElement).dataset.voltIf;
-      currentCleanup = mount(currentElement, ctx.scope);
-      placeholder.before(currentElement);
-      currentBranch = "if";
-    } else if (targetBranch === "else" && elseTemplate) {
-      currentElement = elseTemplate.cloneNode(true) as Element;
-      delete (currentElement as HTMLElement).dataset.voltElse;
-      currentCleanup = mount(currentElement, ctx.scope);
-      placeholder.before(currentElement);
-      currentBranch = "else";
-    } else {
-      currentBranch = undefined;
-    }
+            currentCleanup = mount(currentElement, ctx.scope);
+            currentBranch = "else";
+          } else {
+            currentBranch = undefined;
+          }
+        } finally {
+          isTransitioning = false;
+        }
+      })();
+    });
   };
 
   updateAndRegister(ctx, render, expr);

lib/src/core/view-transitions.ts

···
+/**
+ * View Transitions API integration with CSS fallback
+ * Provides progressive enhancement for smooth DOM transitions
+ */
+
+import { prefersReducedMotion } from "$core/transitions";
+import type { Optional } from "$types/helpers";
+import type { ViewTransitionOptions as ViewTransitionOpts } from "$types/volt";
+
+type StartViewTransitionResult = {
+  finished: Promise<void>;
+  ready: Promise<void>;
+  updateCbDone: Promise<void>;
+  skipTransition(): void;
+};
+
+/**
+ * Extended Document type with View Transitions API support
+ */
+type DocumentWithViewTransition = Document & {
+  startViewTransition(updateCb: () => void | Promise<void>): StartViewTransitionResult;
+};
+
+/**
+ * Check if the browser supports the View Transitions API
+ *
+ * @returns true if document.startViewTransition is available
+ */
+export function supportsViewTransitions(): boolean {
+  return typeof document !== "undefined" && "startViewTransition" in document;
+}
+
+/**
+ * Execute a DOM update with View Transitions API.
+ * Falls back to direct execution if unsupported or reduced motion is preferred.
+ *
+ * @param cb - Function that performs DOM updates
+ * @param opts - Optional configuration for the transition
+ * @returns Promise that resolves when transition completes
+ *
+ * @example
+ * ```typescript
+ * // Simple transition
+ * await startViewTransition(() => {
+ *   element.textContent = 'Updated!';
+ * });
+ *
+ * // Named transition for specific element
+ * await startViewTransition(() => {
+ *   element.classList.add('active');
+ * }, { name: 'card-flip', elements: [element] });
+ * ```
+ */
+export async function startViewTransition(
+  cb: () => void | Promise<void>,
+  opts: ViewTransitionOpts = {},
+): Promise<void> {
+  const { respectReducedMotion = true, forceFallback = false } = opts;
+
+  if (respectReducedMotion && prefersReducedMotion()) {
+    await cb();
+    return;
+  }
+
+  if (!forceFallback && supportsViewTransitions()) {
+    const namedElements = applyViewTransitionNames(opts.name, opts.elements);
+
+    try {
+      const transition = (document as DocumentWithViewTransition).startViewTransition(cb);
+      await transition.finished;
+    } finally {
+      removeViewTransitionNames(namedElements);
+    }
+  } else {
+    await cb();
+  }
+}
+
+/**
+ * Execute a transition with a specific named view transition.
+ * This is a convenience wrapper around startViewTransition for named transitions.
+ *
+ * @param name - View transition name (maps to view-transition-name CSS property)
+ * @param elements - Elements to apply the named transition to
+ * @param cb - Function that performs DOM updates
+ * @returns Promise that resolves when transition completes
+ *
+ * @example
+ * ```typescript
+ * const card = document.querySelector('.card');
+ * await namedViewTransition('card-flip', [card], () => {
+ *   card.classList.toggle('flipped');
+ * });
+ * ```
+ */
+export async function namedViewTransition(
+  name: string,
+  elements: HTMLElement[],
+  cb: () => void | Promise<void>,
+): Promise<void> {
+  return startViewTransition(cb, { name, elements });
+}
+
+/**
+ * Apply view-transition-name CSS property to elements.
+ * Returns a map of elements to their original view-transition-name values
+ * for later restoration.
+ *
+ * @param baseName - Base name for the transition (suffixed with index if multiple elements)
+ * @param elements - Elements to apply names to
+ * @returns Map of elements to their original view-transition-name values
+ *
+ * @internal
+ */
+function applyViewTransitionNames(
+  baseName: Optional<string>,
+  elements: Optional<HTMLElement[]>,
+): Map<HTMLElement, string> {
+  const originalNames = new Map<HTMLElement, string>();
+
+  if (!baseName || !elements || elements.length === 0) {
+    return originalNames;
+  }
+
+  for (const [index, element] of elements.entries()) {
+    const originalValue = element.style.viewTransitionName;
+    originalNames.set(element, originalValue);
+
+    const transitionName = elements.length === 1 ? baseName : `${baseName}-${index}`;
+    element.style.viewTransitionName = transitionName;
+  }
+
+  return originalNames;
+}
+
+/**
+ * Remove view-transition-name CSS properties and restore original values.
+ *
+ * @param namedElements - Map of elements to their original view-transition-name values
+ *
+ * @internal
+ */
+function removeViewTransitionNames(namedElements: Map<HTMLElement, string>): void {
+  for (const [element, originalValue] of namedElements) {
+    if (originalValue) {
+      element.style.viewTransitionName = originalValue;
+    } else {
+      element.style.viewTransitionName = "";
+    }
+  }
+}
+
+/**
+ * Wraps a callback with View Transitions API if supported.
+ * This is a simpler version without named transitions support.
+ *
+ * @param cb - Function to execute
+ * @param respectReducedMotion - Skip transition if prefers-reduced-motion
+ *
+ * @example
+ * ```typescript
+ * withViewTransition(() => {
+ *   element.remove();
+ * });
+ * ```
+ */
+export function withViewTransition(cb: () => void, respectReducedMotion = true): void {
+  if (respectReducedMotion && prefersReducedMotion()) {
+    cb();
+    return;
+  }
+
+  if (supportsViewTransitions()) {
+    (document as DocumentWithViewTransition).startViewTransition(cb);
+  } else {
+    cb();
+  }
+}

lib/src/demo/index.ts

···
 
 import { persistPlugin } from "$plugins/persist";
 import { scrollPlugin } from "$plugins/scroll";
+import { shiftPlugin } from "$plugins/shift";
+import { surgePlugin } from "$plugins/surge";
 import { urlPlugin } from "$plugins/url";
 import { computed, effect, mount, registerPlugin, signal } from "$volt";
+import { createAnimationsSection } from "./sections/animations";
 import { createFormsSection } from "./sections/forms";
 import { createInteractivitySection } from "./sections/interactivity";
 import { createPluginsSection } from "./sections/plugins";
···
 registerPlugin("persist", persistPlugin);
 registerPlugin("scroll", scrollPlugin);
 registerPlugin("url", urlPlugin);
+registerPlugin("surge", surgePlugin);
+registerPlugin("shift", shiftPlugin);
 
 const message = signal("Welcome to the Volt.js Demo");
 const count = signal(0);
···
 const scrollPosition = signal(0);
 const urlParam = signal("");
 
+const showFade = signal(false);
+const showSlideDown = signal(false);
+const showScale = signal(false);
+const showBlur = signal(false);
+const showSlowFade = signal(false);
+const showDelayedSlide = signal(false);
+const showGranular = signal(false);
+const showCombined = signal(false);
+const triggerBounce = signal(0);
+const triggerShake = signal(0);
+const triggerFlash = signal(0);
+const triggerTripleBounce = signal(0);
+const triggerLongShake = signal(0);
+
 const activeTodos = computed(() => todos.get().filter((todo) => !todo.done));
 const completedTodos = computed(() => todos.get().filter((todo) => todo.done));
 
···
   persistedCount,
   scrollPosition,
   urlParam,
+  showFade,
+  showSlideDown,
+  showScale,
+  showBlur,
+  showSlowFade,
+  showDelayedSlide,
+  showGranular,
+  showCombined,
+  triggerBounce,
+  triggerShake,
+  triggerFlash,
+  triggerTripleBounce,
+  triggerLongShake,
   increment,
   decrement,
   reset,
···
     dom.a({ href: "#reactivity" }, "Reactivity"),
     " | ",
     dom.a({ href: "#plugins" }, "Plugins"),
+    " | ",
+    dom.a({ href: "#animations" }, "Animations"),
   );
 
 function buildDemoStructure(): HTMLElement {
···
       createFormsSection(),
       createReactivitySection(),
       createPluginsSection(),
+      createAnimationsSection(),
     ),
     dom.footer(
       null,

lib/src/demo/sections/animations.ts

···
+/**
+ * Animations Section
+ * Demonstrates surge and shift animation plugins
+ */
+
+import * as dom from "../utils";
+
+export function createAnimationsSection(): HTMLElement {
+  return dom.article(
+    { id: "animations" },
+    dom.h2(null, "Animation Demos"),
+    dom.section(
+      null,
+      dom.h3(null, "Surge Plugin: Enter/Leave Transitions"),
+      dom.p(
+        null,
+        "The surge plugin provides smooth transitions when elements appear or disappear.",
+        dom.small(
+          null,
+          "Toggle elements to see fade, slide, scale, and blur transitions. All integrate automatically with data-volt-if and data-volt-show bindings.",
+        ),
+      ),
+      dom.details(
+        null,
+        dom.summary(null, "Fade"),
+        dom.button({ "data-volt-on-click": "showFade.set(!showFade.get())" }, "Toggle Fade"),
+        dom.blockquote({ "data-volt-if": "showFade", "data-volt-surge": "fade" }, "Fades in and out smoothly"),
+      ),
+      dom.details(
+        null,
+        dom.summary(null, "Slide Down"),
+        dom.button({ "data-volt-on-click": "showSlideDown.set(!showSlideDown.get())" }, "Toggle Slide"),
+        dom.blockquote({ "data-volt-if": "showSlideDown", "data-volt-surge": "slide-down" }, "Slides down from above"),
+      ),
+      dom.details(
+        null,
+        dom.summary(null, "Scale"),
+        dom.button({ "data-volt-on-click": "showScale.set(!showScale.get())" }, "Toggle Scale"),
+        dom.blockquote({ "data-volt-if": "showScale", "data-volt-surge": "scale" }, "Scales up smoothly"),
+      ),
+      dom.details(
+        null,
+        dom.summary(null, "Blur"),
+        dom.button({ "data-volt-on-click": "showBlur.set(!showBlur.get())" }, "Toggle Blur"),
+        dom.blockquote({ "data-volt-if": "showBlur", "data-volt-surge": "blur" }, "Blur effect transition"),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Custom Timing"),
+      dom.p(
+        null,
+        "Override transition duration and delay using dot notation.",
+        dom.small(null, "Syntax: data-volt-surge=\"preset.duration.delay\" (times in milliseconds)"),
+      ),
+      dom.details(
+        null,
+        dom.summary(null, "Slow Fade (1000ms)"),
+        dom.button({ "data-volt-on-click": "showSlowFade.set(!showSlowFade.get())" }, "Toggle"),
+        dom.blockquote({ "data-volt-if": "showSlowFade", "data-volt-surge": "fade.1000" }, "Very slow fade"),
+      ),
+      dom.details(
+        null,
+        dom.summary(null, "Delayed Slide (500ms + 200ms delay)"),
+        dom.button({ "data-volt-on-click": "showDelayedSlide.set(!showDelayedSlide.get())" }, "Toggle"),
+        dom.blockquote(
+          { "data-volt-if": "showDelayedSlide", "data-volt-surge": "slide-down.500.200" },
+          "Slides with delay",
+        ),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Different Enter/Leave Transitions"),
+      dom.p(
+        null,
+        "Specify different transitions for entering and leaving.",
+        dom.small(null, "Use data-volt-surge:enter and data-volt-surge:leave for granular control"),
+      ),
+      dom.button({ "data-volt-on-click": "showGranular.set(!showGranular.get())" }, "Toggle Mixed Transition"),
+      dom.blockquote({
+        "data-volt-if": "showGranular",
+        "data-volt-surge:enter": "slide-down.400",
+        "data-volt-surge:leave": "fade.200",
+      }, "Slides in, fades out"),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Shift Plugin: Keyframe Animations"),
+      dom.p(
+        null,
+        "The shift plugin applies CSS keyframe animations for attention effects.",
+        dom.small(null, "Click buttons to trigger animations. Some run continuously, others on demand."),
+      ),
+      dom.div(
+        { style: "display: flex; gap: 0.5rem; flex-wrap: wrap;" },
+        dom.button({
+          "data-volt-on-click": "triggerBounce.set(triggerBounce.get() + 1)",
+          "data-volt-shift": "triggerBounce:bounce",
+        }, "Bounce"),
+        dom.button({
+          "data-volt-on-click": "triggerShake.set(triggerShake.get() + 1)",
+          "data-volt-shift": "triggerShake:shake",
+        }, "Shake"),
+        dom.button({ "data-volt-shift": "pulse" }, "Pulse (Continuous)"),
+        dom.button({
+          "data-volt-on-click": "triggerFlash.set(triggerFlash.get() + 1)",
+          "data-volt-shift": "triggerFlash:flash",
+        }, "Flash"),
+      ),
+      dom.p(null, "Spinning gear: ", dom.span({ "data-volt-shift": "spin", style: "font-size: 2rem;" }, "⚙️")),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Custom Animation Settings"),
+      dom.p(
+        null,
+        "Override animation duration and iteration count.",
+        dom.small(null, "Syntax: data-volt-shift=\"animation.duration.iterations\""),
+      ),
+      dom.div(
+        { style: "display: flex; gap: 0.5rem; flex-wrap: wrap;" },
+        dom.button({
+          "data-volt-on-click": "triggerTripleBounce.set(triggerTripleBounce.get() + 1)",
+          "data-volt-shift": "triggerTripleBounce:bounce.800.3",
+        }, "Triple Bounce (800ms each)"),
+        dom.button({
+          "data-volt-on-click": "triggerLongShake.set(triggerLongShake.get() + 1)",
+          "data-volt-shift": "triggerLongShake:shake.1000.2",
+        }, "Long Shake (1000ms, 2x)"),
+      ),
+    ),
+    dom.section(
+      null,
+      dom.h3(null, "Combined Effects"),
+      dom.p(
+        null,
+        "Surge and shift can be combined for complex animation choreography.",
+        dom.small(null, "Toggle to see content that fades in, then bounces on mount"),
+      ),
+      dom.button({ "data-volt-on-click": "showCombined.set(!showCombined.get())" }, "Toggle Combined Animation"),
+      dom.aside(
+        { "data-volt-if": "showCombined", "data-volt-surge": "fade.400", "data-volt-shift": "bounce" },
+        dom.p(
+          null,
+          dom.strong(null, "Animated aside:"),
+          " This content fades in smoothly, then bounces when it appears!",
+        ),
+      ),
+    ),
+  );
+}

lib/src/demo/utils.ts

···
 export const span: CreateFn<"span"> = (attrs?, ...children) => el("span", attrs, ...children);
 export const small: CreateFn<"small"> = (attrs?, ...children) => el("small", attrs, ...children);
 export const article: CreateFn<"article"> = (attrs?, ...children) => el("article", attrs, ...children);
+export const aside: CreateFn<"aside"> = (attrs?, ...children) => el("aside", attrs, ...children);
 export const section: CreateFn<"section"> = (attrs?, ...children) => el("section", attrs, ...children);
 export const header: CreateFn<"header"> = (attrs?, ...children) => el("header", attrs, ...children);
 export const footer: CreateFn<"footer"> = (attrs?, ...children) => el("footer", attrs, ...children);

lib/src/index.ts

···
   registerTransition,
   unregisterTransition,
 } from "$core/transitions";
+export {
+  namedViewTransition,
+  startViewTransition,
+  supportsViewTransitions,
+  withViewTransition,
+} from "$core/view-transitions";
 export { persistPlugin, registerStorageAdapter } from "$plugins/persist";
 export { scrollPlugin } from "$plugins/scroll";
+export {
+  getAnimation,
+  getRegisteredAnimations,
+  hasAnimation,
+  registerAnimation,
+  shiftPlugin,
+  unregisterAnimation,
+} from "$plugins/shift";
 export { surgePlugin } from "$plugins/surge";
 export { urlPlugin } from "$plugins/url";
 export type {
+  AnimationPreset,
   ArcFunction,
   AsyncEffectFunction,
   AsyncEffectOptions,
···
   TransitionPreset,
   UidFunction,
   UnwrapReactive,
+  ViewTransitionOptions,
 } from "$types/volt";

lib/src/plugins/shift.ts

···
+/**
+ * Shift plugin for CSS keyframe animations
+ * Provides reusable animation presets that can be triggered on demand
+ */
+
+import { prefersReducedMotion } from "$core/transitions";
+import type { Optional } from "$types/helpers";
+import type { AnimationPreset, PluginContext, Signal } from "$types/volt";
+
+/**
+ * Registry of animation presets
+ */
+const animationRegistry = new Map<string, AnimationPreset>();
+
+/**
+ * Built-in animation presets with CSS keyframes
+ */
+const builtinAnimations: Record<string, AnimationPreset> = {
+  bounce: {
+    keyframes: [
+      { offset: 0, transform: "translateY(0)" },
+      { offset: 0.25, transform: "translateY(-20px)" },
+      { offset: 0.5, transform: "translateY(0)" },
+      { offset: 0.75, transform: "translateY(-10px)" },
+      { offset: 1, transform: "translateY(0)" },
+    ],
+    duration: 100,
+    iterations: 1,
+    timing: "ease",
+  },
+  shake: {
+    keyframes: [
+      { offset: 0, transform: "translateX(0)" },
+      { offset: 0.1, transform: "translateX(-10px)" },
+      { offset: 0.2, transform: "translateX(10px)" },
+      { offset: 0.3, transform: "translateX(-10px)" },
+      { offset: 0.4, transform: "translateX(10px)" },
+      { offset: 0.5, transform: "translateX(-10px)" },
+      { offset: 0.6, transform: "translateX(10px)" },
+      { offset: 0.7, transform: "translateX(-10px)" },
+      { offset: 0.8, transform: "translateX(10px)" },
+      { offset: 0.9, transform: "translateX(-10px)" },
+      { offset: 1, transform: "translateX(0)" },
+    ],
+    duration: 500,
+    iterations: 1,
+    timing: "ease",
+  },
+  pulse: {
+    keyframes: [{ offset: 0, transform: "scale(1)", opacity: "1" }, {
+      offset: 0.5,
+      transform: "scale(1.05)",
+      opacity: "0.9",
+    }, { offset: 1, transform: "scale(1)", opacity: "1" }],
+    duration: 1000,
+    iterations: Number.POSITIVE_INFINITY,
+    timing: "ease-in-out",
+  },
+  spin: {
+    keyframes: [{ offset: 0, transform: "rotate(0deg)" }, { offset: 1, transform: "rotate(360deg)" }],
+    duration: 1000,
+    iterations: Number.POSITIVE_INFINITY,
+    timing: "linear",
+  },
+  flash: {
+    keyframes: [{ offset: 0, opacity: "1" }, { offset: 0.25, opacity: "0" }, { offset: 0.5, opacity: "1" }, {
+      offset: 0.75,
+      opacity: "0",
+    }, { offset: 1, opacity: "1" }],
+    duration: 1000,
+    iterations: 1,
+    timing: "linear",
+  },
+};
+
+function initBuiltinAnimations(): void {
+  for (const [name, preset] of Object.entries(builtinAnimations)) {
+    animationRegistry.set(name, preset);
+  }
+}
+
+initBuiltinAnimations();
+
+/**
+ * Register a custom animation preset.
+ * Allows users to define their own named animations in programmatic mode.
+ *
+ * @param name - Animation name (used in data-volt-shift="name")
+ * @param preset - Animation configuration with keyframes and timing
+ *
+ * @example
+ * ```typescript
+ * registerAnimation('wiggle', {
+ *   keyframes: [
+ *     { offset: 0, transform: 'rotate(0deg)' },
+ *     { offset: 0.25, transform: 'rotate(-5deg)' },
+ *     { offset: 0.75, transform: 'rotate(5deg)' },
+ *     { offset: 1, transform: 'rotate(0deg)' }
+ *   ],
+ *   duration: 300,
+ *   iterations: 2,
+ *   timing: 'ease-in-out'
+ * });
+ * ```
+ */
+export function registerAnimation(name: string, preset: AnimationPreset): void {
+  if (animationRegistry.has(name) && Object.hasOwn(builtinAnimations, name)) {
+    console.warn(`[Volt] Overriding built-in animation preset: "${name}"`);
+  }
+  animationRegistry.set(name, preset);
+}
+
+/**
+ * Get an animation preset by name.
+ * Checks both custom and built-in presets.
+ *
+ * @param name - Preset name
+ * @returns Animation preset or undefined if not found
+ */
+export function getAnimation(name: string): Optional<AnimationPreset> {
+  return animationRegistry.get(name);
+}
+
+/**
+ * Check if an animation preset exists.
+ *
+ * @param name - Preset name
+ * @returns true if the preset is registered
+ */
+export function hasAnimation(name: string): boolean {
+  return animationRegistry.has(name);
+}
+
+/**
+ * Unregister a custom animation preset.
+ * Built-in presets cannot be unregistered.
+ *
+ * @param name - Preset name
+ * @returns true if the preset was removed, false otherwise
+ */
+export function unregisterAnimation(name: string): boolean {
+  if (Object.hasOwn(builtinAnimations, name)) {
+    console.warn(`[Volt] Cannot unregister built-in animation preset: "${name}"`);
+    return false;
+  }
+  return animationRegistry.delete(name);
+}
+
+/**
+ * Get all registered animation preset names.
+ *
+ * @returns Array of preset names
+ */
+export function getRegisteredAnimations(): string[] {
+  return [...animationRegistry.keys()];
+}
+
+type ParsedShiftValue = { animationName: string; duration?: number; iterations?: number; signalPath?: string };
+
+/**
+ * Parse shift plugin value to extract configuration.
+ * Supports:
+ * - "animationName" - default animation
+ * - "animationName.duration" - custom duration
+ * - "animationName.duration.iterations" - custom duration and iterations
+ * - "signalPath:animationName" - watch signal with animation
+ * - "signalPath:animationName.duration.iterations" - watch signal with custom settings
+ */
+function parseShiftValue(value: string): Optional<ParsedShiftValue> {
+  const colonIndex = value.indexOf(":");
+
+  if (colonIndex !== -1) {
+    const signalPath = value.slice(0, colonIndex).trim();
+    const animationPart = value.slice(colonIndex + 1).trim();
+    const parsed = parseAnimationValue(animationPart);
+
+    if (!parsed) {
+      return undefined;
+    }
+
+    return { ...parsed, signalPath };
+  }
+
+  return parseAnimationValue(value);
+}
+
+function parseAnimationValue(value: string): Optional<ParsedShiftValue> {
+  const parts = value.split(".");
+  const animationName = parts[0]?.trim();
+
+  if (!animationName) {
+    return undefined;
+  }
+
+  const result: ParsedShiftValue = { animationName };
+
+  if (parts.length > 1) {
+    const duration = Number.parseInt(parts[1], 10);
+    if (!Number.isNaN(duration)) {
+      result.duration = duration;
+    }
+  }
+
+  if (parts.length > 2) {
+    const iterations = Number.parseInt(parts[2], 10);
+    if (!Number.isNaN(iterations)) {
+      result.iterations = iterations;
+    }
+  }
+
+  return result;
+}
+
+function applyAnimation(element: HTMLElement, preset: AnimationPreset, duration?: number, iterations?: number): void {
+  if (prefersReducedMotion()) {
+    return;
+  }
+
+  const effectiveDuration = duration ?? preset.duration;
+  const effectiveIterations = iterations ?? preset.iterations;
+
+  const animation = element.animate(preset.keyframes, {
+    duration: effectiveDuration,
+    iterations: effectiveIterations,
+    easing: preset.timing,
+    fill: "forwards",
+  });
+
+  animation.onfinish = () => {
+    animation.cancel();
+  };
+}
+
+/**
+ * Shift plugin handler.
+ * Provides CSS keyframe animations for elements.
+ *
+ * Syntax:
+ * - data-volt-shift="animationName" - Run animation with default settings
+ * - data-volt-shift="animationName.duration.iterations" - Custom duration and iterations
+ * - data-volt-shift="signalPath:animationName" - Watch signal to trigger animation
+ *
+ * @example
+ * ```html
+ * <!-- One-time animation on mount -->
+ * <button data-volt-shift="bounce">Click Me</button>
+ *
+ * <!-- Continuous pulse animation -->
+ * <div data-volt-shift="pulse">Loading...</div>
+ *
+ * <!-- Trigger animation based on signal -->
+ * <div data-volt-shift="error:shake">Error occurred!</div>
+ *
+ * <!-- Custom duration and iterations -->
+ * <div data-volt-shift="bounce.1000.3">Triple bounce!</div>
+ * ```
+ */
+export function shiftPlugin(ctx: PluginContext, value: string): void {
+  const el = ctx.element as HTMLElement;
+
+  const parsed = parseShiftValue(value);
+  if (!parsed) {
+    console.error(`[Volt] Invalid shift value: "${value}"`);
+    return;
+  }
+
+  const preset = getAnimation(parsed.animationName);
+  if (!preset) {
+    console.error(`[Volt] Unknown animation preset: "${parsed.animationName}"`);
+    return;
+  }
+
+  if (parsed.signalPath) {
+    const signal = ctx.findSignal(parsed.signalPath) as Optional<Signal<unknown>>;
+    if (!signal) {
+      console.error(`[Volt] Signal "${parsed.signalPath}" not found for shift binding`);
+      return;
+    }
+
+    let previousValue = signal.get();
+
+    const unsubscribe = signal.subscribe((value) => {
+      if (value !== previousValue && Boolean(value)) {
+        applyAnimation(el, preset, parsed.duration, parsed.iterations);
+      }
+      previousValue = value;
+    });
+
+    ctx.addCleanup(unsubscribe);
+
+    if (signal.get()) {
+      ctx.lifecycle.onMount(() => {
+        applyAnimation(el, preset, parsed.duration, parsed.iterations);
+      });
+    }
+  } else {
+    ctx.lifecycle.onMount(() => {
+      applyAnimation(el, preset, parsed.duration, parsed.iterations);
+    });
+  }
+}

lib/src/plugins/surge.ts

···
 
 import { sleep } from "$core/shared";
 import { applyOverrides, getEasing, parseTransitionValue, prefersReducedMotion } from "$core/transitions";
+import { withViewTransition } from "$core/view-transitions";
 import type { Optional } from "$types/helpers";
 import type { PluginContext, Signal, TransitionPhase } from "$types/volt";
 
···
   useViewTransitions: boolean;
 };
 
-function supportsViewTransitions(): boolean {
-  return typeof document !== "undefined" && "startViewTransition" in document;
-}
-
-function withViewTransition(callback: () => void): void {
-  if (supportsViewTransitions() && !prefersReducedMotion()) {
-    (document as Document & { startViewTransition: (callback: () => void) => void }).startViewTransition(callback);
-  } else {
-    callback();
-  }
-}
-
 function applyStyles(element: HTMLElement, styles: Record<string, string | number>): void {
   for (const [property, value] of Object.entries(styles)) {
     const cssProperty = property.replaceAll(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
···
       if (phase.to) {
         applyStyles(element, phase.to);
       }
-    });
+    }, false);
   } else {
     if (phase.to) {
       applyStyles(element, phase.to);
···
       if (phase.to) {
         applyStyles(element, phase.to);
       }
-    });
+    }, false);
   } else {
     if (phase.to) {
       applyStyles(element, phase.to);

lib/src/types/volt.d.ts

···
 };
 
 /**
- * Configuration for a single transition phase (enter or leave)
+ * Animation preset for CSS keyframe animations
  */
-export type TransitionPhase = {
+export type AnimationPreset = {
   /**
-   * Initial CSS properties (applied immediately)
+   * Array of keyframes for the animation
    */
-  from?: Record<string, string | number>;
+  keyframes: Keyframe[];
 
   /**
-   * Target CSS properties (animated to)
+   * Duration in milliseconds (default: varies by preset)
    */
-  to?: Record<string, string | number>;
+  duration: number;
 
   /**
-   * Duration in milliseconds (default: 300)
+   * Number of iterations (use Infinity for infinite)
    */
-  duration?: number;
+  iterations: number;
 
   /**
-   * Delay in milliseconds (default: 0)
+   * CSS timing function (default: "ease")
    */
-  delay?: number;
-
-  /**
-   * CSS easing function (default: 'ease')
-   */
-  easing?: string;
-
-  /**
-   * CSS classes to apply during this phase
-   */
-  classes?: string[];
+  timing: string;
 };
 
 /**
- * Complete transition preset with enter and leave phases
+ * Options for configuring a view transition
  */
-export type TransitionPreset = {
+export type ViewTransitionOptions = {
   /**
-   * Configuration for enter transition
-   */
-  enter: TransitionPhase;
-
-  /**
-   * Configuration for leave transition
+   * Named view transition for specific element(s)
+   * Maps to view-transition-name CSS property
    */
-  leave: TransitionPhase;
-};
+  name?: string;
 
-/**
- * Parsed transition value with preset and modifiers
- */
-export type ParsedTransition = {
   /**
-   * The transition preset to use
+   * Elements to apply named transitions to
+   * Each element will get a unique view-transition-name
    */
-  preset: TransitionPreset;
+  elements?: HTMLElement[];
 
   /**
-   * Override duration from preset syntax (e.g., "fade.500")
+   * Skip transition if prefers-reduced-motion is enabled
+   * @default true
    */
-  duration?: number;
+  respectReducedMotion?: boolean;
 
   /**
-   * Override delay from preset syntax (e.g., "fade.500.100")
+   * Force CSS fallback even if View Transitions API is supported
+   * Useful for testing or debugging
+   * @default false
    */
-  delay?: number;
+  forceFallback?: boolean;
 };

lib/test/core/view-transitions.test.ts

···
+import {
+  namedViewTransition,
+  startViewTransition,
+  supportsViewTransitions,
+  withViewTransition,
+} from "$core/view-transitions";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+describe("View Transitions API", () => {
+  let mockStartViewTransition: ReturnType<typeof vi.fn>;
+  let originalStartViewTransition: unknown;
+  let originalMatchMedia: unknown;
+
+  beforeEach(() => {
+    mockStartViewTransition = vi.fn((callback: () => void | Promise<void>) => {
+      const result = callback();
+      return {
+        finished: Promise.resolve(result).then(() => {}),
+        ready: Promise.resolve(),
+        updateCallbackDone: Promise.resolve(result).then(() => {}),
+        skipTransition: vi.fn(),
+      };
+    });
+
+    originalStartViewTransition = (document as Document & { startViewTransition?: unknown }).startViewTransition;
+    originalMatchMedia = globalThis.matchMedia;
+
+    (document as Document & { startViewTransition: typeof mockStartViewTransition }).startViewTransition =
+      mockStartViewTransition;
+
+    globalThis.matchMedia = vi.fn((query: string) => ({
+      matches: query === "(prefers-reduced-motion: reduce)" ? false : false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })) as typeof globalThis.matchMedia;
+  });
+
+  afterEach(() => {
+    if (originalStartViewTransition === undefined) {
+      // @ts-expect-error mocking browser without view transitions API
+      delete (document as Document & { startViewTransition?: unknown }).startViewTransition;
+    } else {
+      // @ts-expect-error mocking view transitions API
+      (document as Document & { startViewTransition: unknown }).startViewTransition = originalStartViewTransition;
+    }
+
+    globalThis.matchMedia = originalMatchMedia as typeof globalThis.matchMedia;
+
+    vi.restoreAllMocks();
+  });
+
+  describe("supportsViewTransitions", () => {
+    it("should return true when View Transitions API is supported", () => {
+      expect(supportsViewTransitions()).toBe(true);
+    });
+
+    it("should return false when View Transitions API is not supported", () => {
+      // @ts-expect-error mocking browser without view transitions API
+      delete (document as Document & { startViewTransition?: unknown }).startViewTransition;
+      expect(supportsViewTransitions()).toBe(false);
+    });
+  });
+
+  describe("startViewTransition", () => {
+    it("should use View Transitions API when supported", async () => {
+      const callback = vi.fn();
+
+      await startViewTransition(callback);
+
+      expect(mockStartViewTransition).toHaveBeenCalledWith(callback);
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it("should fallback to direct execution when API is not supported", async () => {
+      // @ts-expect-error mocking browser without view transitions API
+      delete (document as Document & { startViewTransition?: unknown }).startViewTransition;
+
+      const callback = vi.fn();
+      await startViewTransition(callback);
+
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it("should skip transition when prefers-reduced-motion is enabled", async () => {
+      globalThis.matchMedia = vi.fn((query: string) => ({
+        matches: query === "(prefers-reduced-motion: reduce)" ? true : false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })) as typeof globalThis.matchMedia;
+
+      const callback = vi.fn();
+      await startViewTransition(callback);
+
+      expect(mockStartViewTransition).not.toHaveBeenCalled();
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it("should force fallback when forceFallback option is true", async () => {
+      const callback = vi.fn();
+      await startViewTransition(callback, { forceFallback: true });
+
+      expect(mockStartViewTransition).not.toHaveBeenCalled();
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it("should respect reduced motion preference when respectReducedMotion is true", async () => {
+      globalThis.matchMedia = vi.fn((query: string) => ({
+        matches: query === "(prefers-reduced-motion: reduce)" ? true : false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })) as typeof globalThis.matchMedia;
+
+      const callback = vi.fn();
+      await startViewTransition(callback, { respectReducedMotion: true });
+
+      expect(mockStartViewTransition).not.toHaveBeenCalled();
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it("should use View Transitions API when respectReducedMotion is false even with reduced motion", async () => {
+      globalThis.matchMedia = vi.fn((query: string) => ({
+        matches: query === "(prefers-reduced-motion: reduce)" ? true : false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })) as typeof globalThis.matchMedia;
+
+      const callback = vi.fn();
+      await startViewTransition(callback, { respectReducedMotion: false });
+
+      expect(mockStartViewTransition).toHaveBeenCalledWith(callback);
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it("should apply and remove view-transition-name for named transitions", async () => {
+      const element = document.createElement("div");
+      const callback = vi.fn();
+
+      await startViewTransition(callback, { name: "test-transition", elements: [element] });
+
+      expect(callback).toHaveBeenCalled();
+      expect(element.style.viewTransitionName).toBe("");
+    });
+
+    it("should apply unique names for multiple elements", async () => {
+      const element1 = document.createElement("div");
+      const element2 = document.createElement("div");
+      const callback = vi.fn(() => {
+        expect(element1.style.viewTransitionName).toBe("test-transition-0");
+        expect(element2.style.viewTransitionName).toBe("test-transition-1");
+      });
+
+      await startViewTransition(callback, { name: "test-transition", elements: [element1, element2] });
+
+      expect(callback).toHaveBeenCalled();
+      expect(element1.style.viewTransitionName).toBe("");
+      expect(element2.style.viewTransitionName).toBe("");
+    });
+
+    it("should restore original view-transition-name values", async () => {
+      const element = document.createElement("div");
+      element.style.viewTransitionName = "original-name";
+
+      const callback = vi.fn(() => {
+        expect(element.style.viewTransitionName).toBe("test-transition");
+      });
+
+      await startViewTransition(callback, { name: "test-transition", elements: [element] });
+
+      expect(callback).toHaveBeenCalled();
+      expect(element.style.viewTransitionName).toBe("original-name");
+    });
+
+    it("should handle async callbacks", async () => {
+      const callback = vi.fn(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+      });
+
+      await startViewTransition(callback);
+
+      expect(mockStartViewTransition).toHaveBeenCalledWith(callback);
+      expect(callback).toHaveBeenCalled();
+    });
+  });
+
+  describe("namedViewTransition", () => {
+    it("should apply named transition to single element", async () => {
+      const element = document.createElement("div");
+      const callback = vi.fn(() => {
+        expect(element.style.viewTransitionName).toBe("card-flip");
+      });
+
+      await namedViewTransition("card-flip", [element], callback);
+
+      expect(callback).toHaveBeenCalled();
+      expect(element.style.viewTransitionName).toBe("");
+    });
+
+    it("should apply named transition to multiple elements", async () => {
+      const element1 = document.createElement("div");
+      const element2 = document.createElement("div");
+      const callback = vi.fn(() => {
+        expect(element1.style.viewTransitionName).toBe("card-flip-0");
+        expect(element2.style.viewTransitionName).toBe("card-flip-1");
+      });
+
+      await namedViewTransition("card-flip", [element1, element2], callback);
+
+      expect(callback).toHaveBeenCalled();
+      expect(element1.style.viewTransitionName).toBe("");
+      expect(element2.style.viewTransitionName).toBe("");
+    });
+  });
+
+  describe("withViewTransition", () => {
+    it("should use View Transitions API when supported", () => {
+      const callback = vi.fn();
+
+      withViewTransition(callback);
+
+      expect(mockStartViewTransition).toHaveBeenCalledWith(callback);
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it("should fallback to direct execution when API is not supported", () => {
+      // @ts-expect-error mocking browser without view transitions API
+      delete (document as Document & { startViewTransition?: unknown }).startViewTransition;
+
+      const callback = vi.fn();
+      withViewTransition(callback);
+
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it("should skip transition when prefers-reduced-motion is enabled and respectReducedMotion is true", () => {
+      globalThis.matchMedia = vi.fn((query: string) => ({
+        matches: query === "(prefers-reduced-motion: reduce)" ? true : false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })) as typeof globalThis.matchMedia;
+
+      const callback = vi.fn();
+      withViewTransition(callback, true);
+
+      expect(mockStartViewTransition).not.toHaveBeenCalled();
+      expect(callback).toHaveBeenCalled();
+    });
+
+    it("should use View Transitions API when respectReducedMotion is false", () => {
+      globalThis.matchMedia = vi.fn((query: string) => ({
+        matches: query === "(prefers-reduced-motion: reduce)" ? true : false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })) as typeof globalThis.matchMedia;
+
+      const callback = vi.fn();
+      withViewTransition(callback, false);
+
+      expect(mockStartViewTransition).toHaveBeenCalledWith(callback);
+      expect(callback).toHaveBeenCalled();
+    });
+  });
+});

lib/test/integration/transitions.test.ts

···
+import { shiftPlugin } from "$plugins/shift";
+import { surgePlugin } from "$plugins/surge";
+import type { TransitionPreset } from "$types/volt";
+import { mount, registerPlugin, registerTransition, signal } from "$volt";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+describe("integration: transitions", () => {
+  beforeEach(() => {
+    registerPlugin("surge", surgePlugin);
+    registerPlugin("shift", shiftPlugin);
+    globalThis.matchMedia = vi.fn().mockReturnValue({ matches: false });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("Surge with data-volt-if", () => {
+    it("should animate element in when condition becomes true", async () => {
+      vi.useFakeTimers();
+
+      const container = document.createElement("div");
+      container.innerHTML = `<div data-volt-if="show" data-volt-surge="fade">Content</div>`;
+
+      const show = signal(false);
+      mount(container, { show });
+
+      const comment = [...container.childNodes].find((node) => node.nodeType === 8);
+      expect(comment).toBeDefined();
+
+      show.set(true);
+
+      await vi.advanceTimersByTimeAsync(400);
+
+      const element = container.querySelector("div");
+      expect(element).toBeDefined();
+      if (element) {
+        expect(element.textContent).toContain("Content");
+      }
+
+      vi.useRealTimers();
+    });
+
+    it("should animate element out when condition becomes false", async () => {
+      vi.useFakeTimers();
+
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <div data-volt-if="show" data-volt-surge="fade">
+          Content
+        </div>
+      `;
+
+      const show = signal(true);
+      mount(container, { show });
+
+      let element = container.querySelector("div");
+      expect(element).toBeDefined();
+
+      show.set(false);
+
+      await vi.advanceTimersByTimeAsync(400);
+
+      element = container.querySelector("div");
+      expect(element).toBeNull();
+
+      vi.useRealTimers();
+    });
+
+    it("should support custom enter/leave transitions", async () => {
+      vi.useFakeTimers();
+
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <div
+          data-volt-if="show"
+          data-volt-surge:enter="slide-down"
+          data-volt-surge:leave="fade">
+          Content
+        </div>
+      `;
+
+      const show = signal(false);
+      mount(container, { show });
+
+      show.set(true);
+      await vi.advanceTimersByTimeAsync(400);
+
+      let element = container.querySelector("div");
+      expect(element).toBeDefined();
+
+      show.set(false);
+      await vi.advanceTimersByTimeAsync(400);
+
+      element = container.querySelector("div");
+      expect(element).toBeNull();
+
+      vi.useRealTimers();
+    });
+
+    it("should work with if/else pattern", async () => {
+      vi.useFakeTimers();
+
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <div data-volt-if="show" data-volt-surge="fade">
+          Shown
+        </div>
+        <div data-volt-else data-volt-surge="fade">
+          Hidden
+        </div>
+      `;
+
+      const show = signal(true);
+      mount(container, { show });
+
+      await vi.advanceTimersByTimeAsync(50);
+
+      let shownEl = [...container.querySelectorAll("div")].find((el) => el.textContent?.includes("Shown"));
+      let hiddenEl = [...container.querySelectorAll("div")].find((el) => el.textContent?.includes("Hidden"));
+
+      expect(shownEl).toBeDefined();
+      expect(hiddenEl).toBeUndefined();
+
+      show.set(false);
+      await vi.advanceTimersByTimeAsync(400);
+
+      shownEl = [...container.querySelectorAll("div")].find((el) => el.textContent?.includes("Shown"));
+      hiddenEl = [...container.querySelectorAll("div")].find((el) => el.textContent?.includes("Hidden"));
+
+      expect(shownEl).toBeUndefined();
+      expect(hiddenEl).toBeDefined();
+
+      vi.useRealTimers();
+    });
+
+    it("should support duration and delay modifiers", async () => {
+      vi.useFakeTimers();
+
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <div data-volt-if="show" data-volt-surge="fade.500.100">
+          Content
+        </div>
+      `;
+
+      const show = signal(false);
+      mount(container, { show });
+
+      show.set(true);
+      await vi.advanceTimersByTimeAsync(650);
+
+      const element = container.querySelector("div");
+      expect(element).toBeDefined();
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe("Surge with data-volt-show", () => {
+    it("should toggle display property with transition", async () => {
+      vi.useFakeTimers();
+
+      const container = document.createElement("div");
+      const testEl = document.createElement("div");
+      testEl.dataset.voltShow = "visible";
+      testEl.dataset.voltSurge = "fade";
+      testEl.textContent = "Content";
+      container.append(testEl);
+
+      const visible = signal(true);
+
+      const element = testEl;
+
+      mount(container, { visible });
+
+      expect(element.style.display).not.toBe("none");
+
+      visible.set(false);
+      await vi.advanceTimersByTimeAsync(400);
+
+      expect(element.style.display).toBe("none");
+
+      visible.set(true);
+      await vi.advanceTimersByTimeAsync(400);
+
+      expect(element.style.display).not.toBe("none");
+
+      vi.useRealTimers();
+    });
+
+    it("should not start overlapping transitions", async () => {
+      vi.useFakeTimers();
+
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <div data-volt-show="visible" data-volt-surge="fade">
+          Content
+        </div>
+      `;
+
+      const visible = signal(true);
+      mount(container, { visible });
+
+      const element = container.querySelector("div") as HTMLElement;
+
+      visible.set(false);
+      visible.set(true);
+      visible.set(false);
+
+      await vi.advanceTimersByTimeAsync(50);
+
+      expect(element).toBeDefined();
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe("Surge signal-triggered mode", () => {
+    it("should watch signal and apply transitions", async () => {
+      vi.useFakeTimers();
+
+      const container = document.createElement("div");
+      const testEl = document.createElement("div");
+      testEl.dataset.voltSurge = "show:fade";
+      testEl.textContent = "Content";
+      container.append(testEl);
+
+      const show = signal(false);
+
+      const element = testEl;
+
+      mount(container, { show });
+
+      expect(element.style.display).toBe("none");
+
+      show.set(true);
+      await vi.advanceTimersByTimeAsync(400);
+
+      expect(element.style.display).not.toBe("none");
+
+      show.set(false);
+      await vi.advanceTimersByTimeAsync(400);
+
+      expect(element.style.display).toBe("none");
+
+      vi.useRealTimers();
+    });
+
+    it("should cleanup subscription on unmount", async () => {
+      const container = document.createElement("div");
+      const testEl = document.createElement("div");
+      testEl.dataset.voltSurge = "show:fade";
+      testEl.textContent = "Content";
+      container.append(testEl);
+
+      const show = signal(false);
+      const element = testEl;
+
+      const cleanup = mount(container, { show });
+
+      expect(element.style.display).toBe("none");
+
+      cleanup();
+
+      const initialDisplay = element.style.display;
+      show.set(true);
+
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+      });
+
+      expect(element.style.display).toBe(initialDisplay);
+    });
+  });
+
+  describe("Shift animations", () => {
+    beforeEach(() => {
+      HTMLElement.prototype.animate = vi.fn((_keyframes: Keyframe[], _options?: KeyframeAnimationOptions) => {
+        return { onfinish: null, cancel: vi.fn() } as unknown as Animation;
+      });
+    });
+
+    it("should apply animation on mount", () => {
+      const container = document.createElement("div");
+      const testEl = document.createElement("div");
+      testEl.dataset.voltShift = "bounce";
+      testEl.textContent = "Content";
+      container.append(testEl);
+
+      const element = testEl;
+
+      mount(container, {});
+
+      expect(element.animate).toHaveBeenCalled();
+    });
+
+    it("should trigger animation based on signal", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <button data-volt-shift="trigger:bounce">
+          Click me
+        </button>
+      `;
+
+      const trigger = signal(false);
+      mount(container, { trigger });
+
+      const button = container.querySelector("button") as HTMLElement;
+      expect(button.animate).not.toHaveBeenCalled();
+
+      trigger.set(true);
+      expect(button.animate).toHaveBeenCalled();
+    });
+
+    it("should support duration and iteration modifiers", () => {
+      const container = document.createElement("div");
+      const testEl = document.createElement("div");
+      testEl.dataset.voltShift = "bounce.1000.3";
+      testEl.textContent = "Content";
+      container.append(testEl);
+
+      const element = testEl;
+
+      mount(container, {});
+
+      expect(element.animate).toHaveBeenCalled();
+
+      const animateMock = element.animate as unknown as ReturnType<typeof vi.fn>;
+      const options = animateMock.mock.calls[0]?.[1] as KeyframeAnimationOptions;
+      expect(options?.duration).toBe(1000);
+      expect(options?.iterations).toBe(3);
+    });
+
+    it("should cleanup signal subscription on unmount", () => {
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <button data-volt-shift="trigger:bounce">
+          Click me
+        </button>
+      `;
+
+      const trigger = signal(false);
+      const cleanup = mount(container, { trigger });
+
+      cleanup();
+
+      const button = container.querySelector("button") as HTMLElement;
+      trigger.set(true);
+
+      expect(button.animate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Custom presets", () => {
+    it("should use registered custom transition preset", async () => {
+      vi.useFakeTimers();
+
+      const customPreset: TransitionPreset = {
+        enter: {
+          from: { opacity: 0, transform: "scale(0.5)" },
+          to: { opacity: 1, transform: "scale(1)" },
+          duration: 200,
+          easing: "ease-out",
+        },
+        leave: {
+          from: { opacity: 1, transform: "scale(1)" },
+          to: { opacity: 0, transform: "scale(0.5)" },
+          duration: 200,
+          easing: "ease-in",
+        },
+      };
+
+      registerTransition("custom-scale", customPreset);
+
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <div data-volt-if="show" data-volt-surge="custom-scale">
+          Content
+        </div>
+      `;
+
+      const show = signal(false);
+      mount(container, { show });
+
+      show.set(true);
+      await vi.advanceTimersByTimeAsync(300);
+
+      const element = container.querySelector("div");
+      expect(element).toBeDefined();
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe("Accessibility: prefers-reduced-motion", () => {
+    it("should skip animations when user prefers reduced motion", async () => {
+      globalThis.matchMedia = vi.fn().mockReturnValue({ matches: true });
+
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <div data-volt-if="show" data-volt-surge="fade">
+          Content
+        </div>
+      `;
+
+      const show = signal(false);
+      mount(container, { show });
+
+      show.set(true);
+
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+      });
+
+      const element = container.querySelector("div");
+      expect(element).toBeDefined();
+    });
+  });
+
+  describe("View Transitions API", () => {
+    it("should use View Transitions API when available", async () => {
+      const mockStartViewTransition = vi.fn((callback: () => void | Promise<void>) => {
+        const result = callback();
+        return {
+          finished: Promise.resolve(result).then(() => {}),
+          ready: Promise.resolve(),
+          updateCallbackDone: Promise.resolve(result).then(() => {}),
+          skipTransition: vi.fn(),
+        };
+      });
+
+      // @ts-expect-error - Adding View Transitions API mock
+      document.startViewTransition = mockStartViewTransition;
+
+      const { startViewTransition } = await import("$core/view-transitions");
+
+      await startViewTransition(() => {
+        const el = document.createElement("div");
+        el.textContent = "test";
+      });
+
+      expect(mockStartViewTransition).toHaveBeenCalled();
+
+      // @ts-expect-error - Cleanup mock
+      delete document.startViewTransition;
+    });
+
+    it("should fallback to CSS when View Transitions API not available", async () => {
+      // @ts-expect-error - Ensure View Transitions API is not available
+      delete document.startViewTransition;
+
+      vi.useFakeTimers();
+
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <div data-volt-if="show" data-volt-surge="fade">
+          Content
+        </div>
+      `;
+
+      const show = signal(false);
+      mount(container, { show });
+
+      show.set(true);
+      await vi.advanceTimersByTimeAsync(400);
+
+      const element = container.querySelector("div");
+      expect(element).toBeDefined();
+
+      vi.useRealTimers();
+    });
+  });
+
+  describe("Memory leak prevention", () => {
+    it("should cleanup all transition-related subscriptions", async () => {
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <div data-volt-if="show" data-volt-surge="fade">
+          Content 1
+        </div>
+        <div data-volt-show="visible" data-volt-surge="slide-down">
+          Content 2
+        </div>
+        <div data-volt-surge="trigger:scale">
+          Content 3
+        </div>
+        <button data-volt-shift="animTrigger:bounce">
+          Content 4
+        </button>
+      `;
+
+      const show = signal(false);
+      const visible = signal(true);
+      const trigger = signal(false);
+      const animTrigger = signal(false);
+
+      const cleanup = mount(container, { show, visible, trigger, animTrigger });
+
+      cleanup();
+
+      const initialHTML = container.innerHTML;
+
+      show.set(true);
+      visible.set(false);
+      trigger.set(true);
+      animTrigger.set(true);
+
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+      });
+
+      expect(container.innerHTML).toBe(initialHTML);
+    });
+  });
+
+  describe("Complex integration scenarios", () => {
+    it("should handle multiple animated elements simultaneously", async () => {
+      vi.useFakeTimers();
+
+      const container = document.createElement("div");
+      container.innerHTML = `
+        <div data-volt-if="show1" data-volt-surge="fade">Item 1</div>
+        <div data-volt-if="show2" data-volt-surge="slide-down">Item 2</div>
+        <div data-volt-if="show3" data-volt-surge="scale">Item 3</div>
+      `;
+
+      const show1 = signal(false);
+      const show2 = signal(false);
+      const show3 = signal(false);
+
+      mount(container, { show1, show2, show3 });
+
+      show1.set(true);
+      show2.set(true);
+      show3.set(true);
+
+      await vi.advanceTimersByTimeAsync(400);
+
+      const elements = container.querySelectorAll("div");
+      expect(elements.length).toBe(3);
+
+      vi.useRealTimers();
+    });
+
+    it("should combine surge and shift on same element", async () => {
+      HTMLElement.prototype.animate = vi.fn((_keyframes: Keyframe[], _options?: KeyframeAnimationOptions) => {
+        return { onfinish: null, cancel: vi.fn() } as unknown as Animation;
+      });
+
+      const container = document.createElement("div");
+      const testEl = document.createElement("div");
+      testEl.dataset.voltShow = "visible";
+      testEl.dataset.voltSurge = "fade";
+      testEl.dataset.voltShift = "bounce";
+      testEl.textContent = "Combined";
+      container.append(testEl);
+
+      const element = testEl;
+
+      const visible = signal(true);
+      mount(container, { visible });
+
+      await new Promise((resolve) => {
+        setTimeout(resolve, 100);
+      });
+
+      expect(element.animate).toHaveBeenCalled();
+    });
+  });
+});

lib/test/plugins/shift.test.ts

···
+import { signal } from "$core/signal";
+import {
+  getAnimation,
+  getRegisteredAnimations,
+  hasAnimation,
+  registerAnimation,
+  shiftPlugin,
+  unregisterAnimation,
+} from "$plugins/shift";
+import type { AnimationPreset, PluginContext } from "$types/volt";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+describe("Shift Plugin", () => {
+  let container: HTMLDivElement;
+  let element: HTMLElement;
+  let mockContext: PluginContext;
+  let cleanups: Array<() => void>;
+  let onMountCallbacks: Array<() => void>;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    element = document.createElement("div");
+    element.textContent = "Test Content";
+    container.append(element);
+    document.body.append(container);
+
+    cleanups = [];
+    onMountCallbacks = [];
+
+    mockContext = {
+      element,
+      scope: {},
+      addCleanup: (fn) => {
+        cleanups.push(fn);
+      },
+      findSignal: vi.fn(),
+      evaluate: vi.fn(),
+      lifecycle: {
+        onMount: (cb) => {
+          onMountCallbacks.push(cb);
+          cb();
+        },
+        onUnmount: vi.fn(),
+        beforeBinding: vi.fn(),
+        afterBinding: vi.fn(),
+      },
+    };
+
+    globalThis.matchMedia = vi.fn().mockReturnValue({ matches: false });
+
+    element.animate = vi.fn((keyframes: Keyframe[], options?: KeyframeAnimationOptions) => {
+      return {
+        onfinish: null,
+        cancel: vi.fn(),
+        _keyframes: keyframes,
+        _options: options,
+      };
+    }) as unknown as typeof element.animate;
+  });
+
+  afterEach(() => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+    cleanups = [];
+    onMountCallbacks = [];
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  describe("Animation Registry", () => {
+    it("should have built-in animation presets", () => {
+      expect(hasAnimation("bounce")).toBe(true);
+      expect(hasAnimation("shake")).toBe(true);
+      expect(hasAnimation("pulse")).toBe(true);
+      expect(hasAnimation("spin")).toBe(true);
+      expect(hasAnimation("flash")).toBe(true);
+    });
+
+    it("should register custom animation", () => {
+      const customAnimation: AnimationPreset = {
+        keyframes: [
+          { offset: 0, transform: "scale(1)" },
+          { offset: 1, transform: "scale(1.5)" },
+        ],
+        duration: 500,
+        iterations: 1,
+        timing: "ease",
+      };
+
+      registerAnimation("custom", customAnimation);
+      expect(hasAnimation("custom")).toBe(true);
+      expect(getAnimation("custom")).toEqual(customAnimation);
+    });
+
+    it("should unregister custom animation", () => {
+      const customAnimation: AnimationPreset = {
+        keyframes: [{ offset: 0, opacity: "1" }, { offset: 1, opacity: "0" }],
+        duration: 300,
+        iterations: 1,
+        timing: "linear",
+      };
+
+      registerAnimation("temp", customAnimation);
+      expect(hasAnimation("temp")).toBe(true);
+
+      const result = unregisterAnimation("temp");
+      expect(result).toBe(true);
+      expect(hasAnimation("temp")).toBe(false);
+    });
+
+    it("should not unregister built-in animation", () => {
+      const result = unregisterAnimation("bounce");
+      expect(result).toBe(false);
+      expect(hasAnimation("bounce")).toBe(true);
+    });
+
+    it("should get all registered animations", () => {
+      const animations = getRegisteredAnimations();
+      expect(animations).toContain("bounce");
+      expect(animations).toContain("shake");
+      expect(animations).toContain("pulse");
+      expect(animations).toContain("spin");
+      expect(animations).toContain("flash");
+    });
+
+    it("should warn when overriding built-in animation", () => {
+      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const customAnimation: AnimationPreset = {
+        keyframes: [{ offset: 0, opacity: "1" }],
+        duration: 100,
+        iterations: 1,
+        timing: "ease",
+      };
+
+      registerAnimation("bounce", customAnimation);
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Overriding built-in animation preset: "bounce"'),
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("Basic Animation Application", () => {
+    it("should apply animation on mount", () => {
+      shiftPlugin(mockContext, "bounce");
+
+      expect(element.animate).toHaveBeenCalled();
+      const animateCall = (element.animate as ReturnType<typeof vi.fn>).mock.calls[0];
+      expect(animateCall).toBeDefined();
+    });
+
+    it("should use default duration and iterations", () => {
+      shiftPlugin(mockContext, "bounce");
+
+      expect(element.animate).toHaveBeenCalled();
+      const animateMock = element.animate as unknown as ReturnType<typeof vi.fn>;
+      const options = animateMock.mock.calls[0]?.[1] as KeyframeAnimationOptions;
+      expect(options?.duration).toBe(100);
+      expect(options?.iterations).toBe(1);
+    });
+
+    it("should apply custom duration", () => {
+      shiftPlugin(mockContext, "bounce.1000");
+
+      expect(element.animate).toHaveBeenCalled();
+      const animateMock = element.animate as unknown as ReturnType<typeof vi.fn>;
+      const options = animateMock.mock.calls[0]?.[1] as KeyframeAnimationOptions;
+      expect(options?.duration).toBe(1000);
+    });
+
+    it("should apply custom duration and iterations", () => {
+      shiftPlugin(mockContext, "bounce.500.3");
+
+      expect(element.animate).toHaveBeenCalled();
+      const animateMock = element.animate as unknown as ReturnType<typeof vi.fn>;
+      const options = animateMock.mock.calls[0]?.[1] as KeyframeAnimationOptions;
+      expect(options?.duration).toBe(500);
+      expect(options?.iterations).toBe(3);
+    });
+
+    it("should handle unknown animation preset", () => {
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+      shiftPlugin(mockContext, "unknown");
+
+      expect(element.animate).not.toHaveBeenCalled();
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('Unknown animation preset: "unknown"'));
+
+      consoleSpy.mockRestore();
+    });
+
+    it("should handle invalid shift value", () => {
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+      shiftPlugin(mockContext, "");
+
+      expect(element.animate).not.toHaveBeenCalled();
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("Invalid shift value"));
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("Signal-Triggered Animations", () => {
+    it("should trigger animation when signal changes to truthy", () => {
+      const triggerSignal = signal(false);
+      mockContext.findSignal = vi.fn().mockReturnValue(triggerSignal);
+
+      shiftPlugin(mockContext, "trigger:bounce");
+
+      expect(element.animate).not.toHaveBeenCalled();
+
+      triggerSignal.set(true);
+
+      expect(element.animate).toHaveBeenCalled();
+    });
+
+    it("should not trigger animation when signal stays truthy", () => {
+      const triggerSignal = signal(true);
+      mockContext.findSignal = vi.fn().mockReturnValue(triggerSignal);
+
+      shiftPlugin(mockContext, "trigger:bounce");
+
+      expect(element.animate).toHaveBeenCalledTimes(1);
+
+      triggerSignal.set(true);
+
+      expect(element.animate).toHaveBeenCalledTimes(1);
+    });
+
+    it("should trigger animation on initial mount if signal is truthy", () => {
+      const triggerSignal = signal(true);
+      mockContext.findSignal = vi.fn().mockReturnValue(triggerSignal);
+
+      shiftPlugin(mockContext, "trigger:bounce");
+
+      expect(element.animate).toHaveBeenCalledTimes(1);
+    });
+
+    it("should handle signal not found", () => {
+      const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+      mockContext.findSignal = vi.fn().mockReturnValue(undefined);
+
+      shiftPlugin(mockContext, "missing:bounce");
+
+      expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining('Signal "missing" not found'));
+      consoleSpy.mockRestore();
+    });
+
+    it("should support custom duration and iterations with signal trigger", () => {
+      const triggerSignal = signal(false);
+      mockContext.findSignal = vi.fn().mockReturnValue(triggerSignal);
+
+      shiftPlugin(mockContext, "trigger:bounce.800.2");
+
+      triggerSignal.set(true);
+
+      expect(element.animate).toHaveBeenCalled();
+      const animateMock = element.animate as unknown as ReturnType<typeof vi.fn>;
+      const options = animateMock.mock.calls[0]?.[1] as KeyframeAnimationOptions;
+      expect(options?.duration).toBe(800);
+      expect(options?.iterations).toBe(2);
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should respect prefers-reduced-motion", () => {
+      globalThis.matchMedia = vi.fn().mockReturnValue({ matches: true });
+
+      shiftPlugin(mockContext, "bounce");
+
+      expect(element.animate).not.toHaveBeenCalled();
+    });
+
+    it("should not animate when prefers-reduced-motion is active and signal triggers", () => {
+      globalThis.matchMedia = vi.fn().mockReturnValue({ matches: true });
+
+      const triggerSignal = signal(false);
+      mockContext.findSignal = vi.fn().mockReturnValue(triggerSignal);
+
+      shiftPlugin(mockContext, "trigger:bounce");
+
+      triggerSignal.set(true);
+
+      expect(element.animate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Animation Cleanup", () => {
+    it("should cancel animation on finish", () => {
+      const mockAnimation = {
+        onfinish: null as (() => void) | null,
+        cancel: vi.fn(),
+      };
+
+      element.animate = vi.fn().mockReturnValue(mockAnimation);
+
+      shiftPlugin(mockContext, "bounce");
+
+      expect(mockAnimation.onfinish).toBeDefined();
+
+      mockAnimation.onfinish?.();
+
+      expect(mockAnimation.cancel).toHaveBeenCalled();
+    });
+
+    it("should cleanup signal subscription", () => {
+      const triggerSignal = signal(false);
+      const unsubscribe = vi.fn();
+      triggerSignal.subscribe = vi.fn().mockReturnValue(unsubscribe);
+
+      mockContext.findSignal = vi.fn().mockReturnValue(triggerSignal);
+
+      shiftPlugin(mockContext, "trigger:bounce");
+
+      expect(cleanups).toHaveLength(1);
+
+      cleanups[0]();
+
+      expect(unsubscribe).toHaveBeenCalled();
+    });
+  });
+
+  describe("Built-in Animations", () => {
+    it("should have bounce animation with correct keyframes", () => {
+      const bounce = getAnimation("bounce");
+      expect(bounce).toBeDefined();
+      expect(bounce?.keyframes.length).toBeGreaterThan(0);
+      expect(bounce?.duration).toBe(100);
+      expect(bounce?.iterations).toBe(1);
+    });
+
+    it("should have shake animation with correct keyframes", () => {
+      const shake = getAnimation("shake");
+      expect(shake).toBeDefined();
+      expect(shake?.keyframes.length).toBeGreaterThan(0);
+      expect(shake?.duration).toBe(500);
+    });
+
+    it("should have pulse animation with infinite iterations", () => {
+      const pulse = getAnimation("pulse");
+      expect(pulse).toBeDefined();
+      expect(pulse?.iterations).toBe(Number.POSITIVE_INFINITY);
+    });
+
+    it("should have spin animation with infinite iterations", () => {
+      const spin = getAnimation("spin");
+      expect(spin).toBeDefined();
+      expect(spin?.iterations).toBe(Number.POSITIVE_INFINITY);
+      expect(spin?.timing).toBe("linear");
+    });
+
+    it("should have flash animation", () => {
+      const flash = getAnimation("flash");
+      expect(flash).toBeDefined();
+      expect(flash?.duration).toBe(1000);
+    });
+  });
+});