Studio Playbook

Platforms

• • Webflow (primary: marketing sites, portfolios, landing pages)
• • Shopify (primary: e-commerce, product-driven sites)
• • Next.js / Astro (only when Webflow or Shopify can't handle the project)

Animation Core

• • GSAP + ScrollTrigger + SplitText + Flip + ScrollSmoother (via Webflow custom code or Shopify theme)
• • Lenis (smooth scroll, integrated with GSAP)
• • Webflow Interactions (simple states only: hovers, toggles, tabs)
• • Rive (vector animation when GSAP isn't the right tool)

3D / WebGL

• • Three.js embedded via Webflow custom code or Shopify sections
• • Spline (for visual 3D, embeddable in Webflow)
• • Custom GLSL shaders (premium tier)
• • WebGPU (experimental 2026)

Transitions

• • Barba.js for page transitions in Webflow (multi-page SPA feel)
• • CSS View Transitions API
• • Custom loaders as content, not spinners

Type

• • Licensed typefaces via Adobe Fonts or self-hosted
• • Variable fonts with animated weight/width
• • SplitText for character-level animation
• • Never default Google Fonts on premium projects

Shopify Specific

• • Liquid template architecture (sections, snippets, blocks)
• • Metafields for flexible content
• • Shopify Markets for international
• • Klaviyo / Stripe / shipping integrations

Webflow Specific

• • Component/symbol library per project
• • CMS collection architecture planned before build
• • Client Editor mode tested before handoff
• • Finsweet Attributes or custom solutions for CMS filtering/sorting

Other

• • Howler.js (audio, muted by default + toggle)
• • CSS scroll-driven animations API
• • Blender / Spline for 3D asset creation