transition

Orchestrate SPA page transitions with Taxi.js, Lenis, and WebGL.

Updated Feb 13, 2026
One-click install
npx skills add https://github.com/BamoJ/playfight-2k26 --skill transition-bamoj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: transition
Source: https://github.com/BamoJ/playfight-2k26/tree/main/.claude/skills/transition
Command: npx skills add https://github.com/BamoJ/playfight-2k26 --skill transition-bamoj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation of visually engaging and smooth page-to-page transitions, enhancing user experience in Single Page Applications.

Core Features & Use Cases

  • SPA Routing Integration: Works with Taxi.js for efficient page navigation.
  • Smooth Scrolling: Integrates Lenis for buttery-smooth scroll effects.
  • WebGL Transitions: Enables complex, animated WebGL mesh transitions between pages for a polished look.
  • Use Case: Implementing a website where clicking a thumbnail image smoothly animates it to fill the next page's hero section, with a custom shader effect.

Quick Start

Use the transition skill to create a default fade-in/fade-out transition between pages.

Frequently Asked Questions about transition

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create seamless SPA page transitions with WebGL?▼

Seamless SPA page transitions with WebGL are orchestrated using Taxi.js for routing, Lenis for smooth scrolling, and a WebGL TransitionController for animated mesh handoffs during DOM updates and scene swaps.

What is the best way to animate a thumbnail into a hero section during page navigation?▼

Animating a thumbnail into a hero section during page navigation uses a WebGL TransitionController to manage custom shader effects and animated mesh handoffs across the SPA route change.

Can I use Taxi.js and Lenis together for smooth scrolling and routing?▼

Yes, Taxi.js and Lenis integrate together to manage efficient SPA page navigation and buttery-smooth scroll effects, synchronizing scroll control with DOM updates during transitions.

Does this WebGL transition approach handle mobile optimizations?▼

The WebGL transition approach handles cross-browser compatibility and mobile optimizations to ensure consistent user experiences during SPA navigation and canvas scene swaps.

How do I manage scroll control during single page application routing?▼

Scroll control during single page application routing is managed by integrating Lenis smooth scrolling with Taxi.js, synchronizing scroll behavior with DOM updates and WebGL canvas scene swaps.