Designer Studio

Overview

Designer Studio is a dark, precision-focused design-studio marketing site by SonoJS (demo brand: Designer Studio / Pixel Engineered). Zero-build static HTML with local Tailwind, Inter + JetBrains Mono fonts, Iconify/Solar icons, GSAP ScrollTrigger, and a WebGL ambient canvas. Hero Designing at the pixel level with Available for projects badge, View portfolio / Get in touch CTAs, Precision / 60fps / Zero Compromise metrics, Selected Works grid (Fintech, E-Commerce, AI Dashboard, Creative Agency), Discovery → Design → Development process, philosophy manifesto, and Studio footer status. Demo studio chrome only - no CRM backend. Run with npx --yes serve . or host statically on Cloudflare Workers.

Highlights

1. 01

   Pixel-level hero

   Masked title reveal, Available for projects badge, and Precision / 60fps metrics.

2. 02

   Works + process

   Selected Works cards into Discovery → Design → Development chapters.

3. 03

   WebGL ambient stage

   Canvas background with vignette, noise overlay, and GSAP ScrollTrigger motion.

4. 04

   Zero-build static

   npx --yes serve . - local Tailwind, GSAP, fonts, and Iconify vendor.

You get

• index.html (Designer Studio — Pixel Engineered)
• fonts/fonts.css + Inter / JetBrains Mono woff2
• vendor/ tailwindcss.js, gsap, ScrollTrigger, iconify, solar-icons

Run locally

From the unzipped project folder:

npx --yes serve .