What you get
- One HTML file with fonts and images embedded, no network requests
- Shader hero, client marquee, studio band, staggered work grid and a searchable project index
- A page per case study plus journal, privacy, terms and a not-found screen
- Service tabs, engagement plans with a currency switch, quotes, team, FAQ and a project brief form
- Optional studio, case and team photos and a case-card loop generated with PopNow after a credit quote
Good for
- Design, branding, web, motion and 3D studios
- Freelancers and small consultancies with real projects to show
- Architecture and interiors practices that want a calm, premium portfolio
Not for
- Online stores or dark, neon-heavy brands
- Pages that need a photo or video behind the headline
- Sites without finished work to present
How to use it
In Claude or ChatGPT
Use the PopNow skill "Shader Hero Agency Website" (creative-agency-website) for this: Build the site for Quarrow, a four-person brand and web studio in Porto. Projects: a ceramics shop relaunch, a ferry timetable app and a bakery identity. Engagements: Sprint, Launch, Retainer.
In a coding agent
/popnow-creative-agency-website Build the site for Quarrow, a four-person brand and web studio in Porto. Projects: a ceramics shop relaunch, a ferry timetable app and a bakery identity. Engagements: Sprint, Launch, Retainer.
Then try
Quote photos for the three case studies and a team grid before generating anything.
Turn the ferry case card into a slow video loop from its hero photo and tell me the price first.
What to have ready
- Studio name, a one-sentence positioning line, cities and contact details
- Two to six projects with the brief, what you did and one measurable result
- Services, how clients hire you and the people who lead
- Optional: a PopNow API key or your own studio and project photos
Similar skills
View all →3D Avatar Maker
+3Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
Calendar Heatmap
+3A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
AI SaaS Landing Page
+3Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
Animated Hero Section
+3A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
Dark SaaS Landing Page
+3A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
Designer Portfolio Website
+3Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
Developer Portfolio Website
+3A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
Editorial SaaS Website
+3Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
Glassmorphism Website Template
+3Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
Hardware Product Website
+3Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
Interactive Architecture Diagram
+3An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
Interactive Grid Hero
+3A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
Knowledge Graph Explorer
+3Turn project notes into an offline, searchable graph where every claim links back to its source line.
KPI Dashboard Template
+3Four KPI tiles with change chips over a glowing line chart, a breakdown table and target bars on warm paper.
Landing Page from AI Mockups
+3See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
Magazine Website Template
+3A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
Particle Animation Hero
+3Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
Personal Brand Website
+3A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
Cinematic Product Launch Page
+3Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
Admin Dashboard Template
+3A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
SaaS Landing Page Template
+3A calm, light marketing site for a software product with a working product console, pricing and sign-up.
Scrapbook Portfolio Website
+3A multi-page online CV made of paper objects, with case studies and a printable resume.
Sneaker Store Website Template
+3A complete footwear or apparel shop with catalog, product pages, bag and demo checkout in one HTML file.
Workflow Automation Landing Page
+3Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
Questions
Does the shader slow the page down?
It renders at reduced resolution with the pixel ratio capped, pauses when the hero leaves the screen or the tab is hidden, and shows one still frame under reduced motion. A CSS version of the same look sits underneath, so the page looks finished even without WebGL.
What does PopNow generate here?
Photos for the studio band, each case study and the team, all in one art direction, plus an optional slow loop that replaces one case card's still. The hero itself is code and needs nothing. Every run is quoted in credits and starts only after you agree.
Can I use it without a PopNow API key?
Yes. The bundled studio photos can stay as neutral stand-ins, case media can become CSS panels in each client's colours, and quotes use initials avatars. The skill lists the slots that still want real photos.
Can I change the orange accent?
Yes, through a handful of tokens and the shader's colour presets. The page keeps a single accent and avoids purple and violet hues, which the validator checks; a brand DESIGN.md in your project is mapped onto those tokens.