King Aguirre

Render settings

Look
Motion
IndexKing Aguirre

Render settings

Look
Motion
Start a projecte.kingaguirre@gmail.com

V00 Flagship · Studio and product ecosystem

From first brief to shipped site.

VibeBox is the developer-led studio I run. It plans, previews and launches websites for businesses, and builds its own products and the motion library they all share.
Visit vibeboxph.comEngineering deep dive

Monorepo: 288 commits, 2026-06-06 to 2026-10-15 · 231 unit test files · board snapshot 2026-10-15

  • 18builds on the launch board
  • 11live today
  • 13apps and packages in one monorepo
  • 113motion components in VibeBox Motion

V01 The problem and the audience

A business site is more than a look.

Owners need people to find them, trust them, book or buy, and keep the site running after launch. Every VibeBox build starts from these six needs, not from a template.
  1. 01

    Discovery

    Who the visitors are and what they came to do.

  2. 02

    Trust

    Proof, clear policies and a real way to reach a person.

  3. 03

    Custom interactions

    The one moment that makes the business memorable.

  4. 04

    Booking and commerce

    Enquiries, carts, payments and the admin behind them.

  5. 05

    Handoff

    A site the owner can actually run after launch.

  6. 06

    Support

    Someone who keeps it working when things change.

V02 What the ecosystem includes

One studio, four moving parts.

The studio, its motion library, a brief wizard and the builds. Each has its own status, and I only call something released when it is.

Live

Web Studio

Client websites planned, designed, built and launched by a developer-led studio.

www.vibeboxph.com

V03 Product and delivery pipeline

Six stations, sketch to final.

The studio's published process. Each station is a render pass: a build moves from a sketch to a fully lit frame.

  1. 01 · sketch

    Discovery

    Understand the business, the visitors and what they need to do.

  2. 02 · wire

    Brief and scope

    Pages, flows and integrations agreed before design starts.

  3. 03 · clay

    Concept and preview

    A clickable direction to react to early.

  4. 04 · lookdev

    Implementation

    Next.js, React and TypeScript, with Supabase where data is needed.

  5. 05 · lookdev

    QA

    Responsive, accessible, tested journeys.

  6. 06 · final

    Launch and care

    Shipped, monitored and maintained.

V04 Engineering system

One repository, thirteen pieces.

Four apps and nine packages, read straight from the repository tree. Hover a name to lift its block.
Read the engineering deep dive

Apps

Packages

Read from the repository tree, 2026-10-16.

V05 Motion and craft

A cabinet of 113 components.

VibeBox Motion is where the studio's interactions live: kinetic type, scroll rails, wordmark footers, chat pieces and a long-running procedural dragon study. Hover a card to see it move.
The Motion case study
  • kinetic-headlinecomponent
  • scroll-railcomponent
  • browser-framecomponent
  • thinking-indicatorcomponent
  • odometer-statcomponent
  • wire-globecomponent
  • envelopecomponent
  • card-fancomponent
  • dragoncomponent
  • hero-kinetic-typeblock
  • footer-giant-wordmarkblock
  • gallery-coverflowblock

Twelve of the 113 component and 78 block folders in packages/motion. Specimens here are small redraws, not the components themselves.

V06 Launch board

18 builds, in public.

8 client websites and 10 products, 11 marked live, as listed on the studio's public board on 2026-10-15. A status is the board's label, not a guarantee of every feature.
See the live board
  1. LiveGiftlyPHClient site
  2. LiveData Table ProProduct
  3. BetaKaiProduct
  4. LiveKaraoke NightProduct
  5. LiveReact Component KitProduct
  6. BetaKabanProduct
  7. BetaKahaProduct
  8. LiveWobbiProduct
  9. LiveTicketBoxPHClient site
  10. LiveAAM Van RentalClient site
  11. LiveThe Event CornerClient site
  12. LiveTrident PHClient site
  13. LiveEnclaveClient site
  14. LiveEmdeeClient site
  15. PreviewBarty BakesClient site
  16. DemoDayoProduct
  17. DemoUy TrendingProduct
  18. DemoShortscapeProduct

V07 What the work shows

Patterns that repeat across builds.

  1. Specs before code

    Each repository carries its plan, its design system and an agent guide, so the next session (human or agent) starts from the same facts.

    AGENTS.md, DESIGN.md and PLAN.md files across the studio's repositories

  2. Logic outside the UI

    Money, carts, tickets and payouts live in plain TypeScript packages with their own tests, not inside components.

    packages/core in Kaha, packages/ticketing in TicketBoxPH, packages/domain in Kaban

  3. Every change is read

    Nothing a coding tool writes goes in unread. I review each diff, run the type checks and tests, and rewrite whatever does not fit the design I set.

    Strict TypeScript, Vitest and Playwright gates in the repositories

  4. A person approves what ships

    Agents draft and implement. Payments, releases and risky changes need a human to look first.

    VibeBox Agent Console approvals; Barty Bakes payment attestation

Start a projectAll builds