2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
An oversized electric-blue and volt-yellow composition gives this running shoe launch a clear identity before a visitor scrolls. The centerpiece is an original procedural shoe model with a squared toe, a sculpted two-arch sole, an exposed lace bridge, and small oval ventilation details. It rotates through side, front, heel, and top views as the page moves. Dedicated angle buttons provide the same views without requiring a mouse gesture or scroll effect.
The shoe is an invented product rather than a recreation of an existing design. Consistent photographic-style assets show the fictional shoe in a studio, its construction details, and a runner’s lower legs. These images give the page the material detail of a real product launch, while the interactive model provides a useful way to inspect its form. Reduced-motion mode switches to static angle views and final specification values.
Below the hero, cushioning, stack height, drop, and illustrative weight figures are explained in plain language. A colorway control changes the model materials and selection summary. A size finder uses foot length and a transparent size table to suggest a starting point, and a local bag records the chosen size and quantity with an accurate total. It never pretends to accept an order or payment.
A visible countdown is explicitly a browser-only demonstration. It starts from a relative duration, expires honestly, and can be replayed without showing a calendar date or suggesting real stock pressure. All product text and values come from one module. The alternate example changes the fictional brand, product, specifications, and launch story while preserving the original shoe architecture and bold layout. The template suits footwear concepts and other physical product launches that benefit from real inspection controls.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Running Shoe Product Launch Page Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else. ## Brief Build [BRAND] launching [PRODUCT], an original fictional daily road-running shoe with a square-rounded toe and twin-arch segmented sole. This is a product concept demo with illustrative specifications. - Audience: Everyday runners who compare fit, construction and practical details. - Goal: Inspect actual original 3D shoe angles, choose a color and size, use a transparent size guide and preview a local bag; all commerce and drop time are clearly demo-only. - Tone: Energetic, direct and specific, without medical claims, athlete endorsements or fabricated laboratory results. ## Stack - Framework: Vite + React + TypeScript - Styling: Vanilla CSS - Libraries: vite (MIT), react (MIT), react-dom (MIT), typescript (Apache-2.0), @fontsource/barlow-condensed (OFL-1.1), @fontsource/inter (OFL-1.1), three (MIT) - Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs. - Setup: - Set Vite base to ./ and build.sourcemap to false. Use a single src/content.ts for all editable content and fully rewrite its data for variable changes. - Implement responsive components and CSS tokens in src/styles.css. Bundle fonts through the listed Fontsource packages; import only the weights actually used. - Provide semantic native controls and keyboard/touch alternatives; implement focus-managed dialogs and local-only validated form feedback. - Use three.js with original BufferGeometry/Shape/ExtrudeGeometry and local procedural CanvasTexture; no downloaded shoe model, logo, remote HDRI, copyrighted texture or branded silhouette. Configure antialiasing, transparent canvas, ACESFilmicToneMapping, sRGB output and capped DPR<=1.5. Use local neutral hemisphere/directional lights and a soft procedural contact-shadow plane; no external environment. - Original model construction: length axis x from -1.45 heel to +1.6 toe; broad squared toe with 0.24 corner radius, width .65 at forefoot/.46 heel, toe upturn .13. Create a lofted mesh upper from cross-sections, not a scaled capsule: ankle opening visible at heel, low vamp, asymmetric six oval side vents; generate a subtle woven procedural texture. Midsole is cream-free volt #E4FF1A with two large original arch recesses under midfoot; outsole consists of 8 separate rounded oblong black tread pods. Add a raised broad lace bridge with 5 short tube lace segments and thick rear loop. Absolutely no swooping logo, trademark stripe, real brand emblem or copied commercial shoe profile. Keep model premium and physically coherent, under 25k triangles. - Place model group at origin, provide four angle buttons Side (rotation y=0), Front (y=-1.35), Heel (y=1.65), Top (x=.8,y=.25), with neutral reset. Scroll progress across a 180vh product stage changes y from -.35 to 2.8 and x from .06 to .22. Root geometry stays identical; color changes only materials. Pointer drag and buttons also work; pause scroll control while dragging and restore using a clearly labeled Follow scroll toggle. Static photographic fallback if WebGL unavailable. Reduced motion uses discrete instant angles, never forced scrub. ## Variables - [BRAND] — Brand (default: "Tervo Run"). Rewrite every related headline, item, label, alt and confirmation for this value. - [PRODUCT] — Product (default: "Relay Arc"). Rewrite every related headline, item, label, alt and confirmation for this value. - [WEIGHT_G] — Weight G (default: "242"). Rewrite every related headline, item, label, alt and confirmation for this value. - [PRICE] — Price (default: "148"). Rewrite every related headline, item, label, alt and confirmation for this value. - [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/running-shoe-product-launch-page in the footer (default: yes; delete this line to remove it) The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described. Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.
Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.
DESIGN.md
The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.
---
name: "Running Shoe Product Launch Page"
colors:
electric_blue: "#0047FF"
volt_yellow: "#E4FF1A"
black: "#080B13"
white: "#FFFFFF"
typography:
display: { family: "Barlow Condensed", weights: [700] }
body: { family: "Inter", weights: [400, 700] }
spacing: "1280px max, 48px desktop/20px mobile gutters; 8px baseline. 100px/56px section spacing, 140px desktop/64px mobile condensed display. Product stage sticky only in desktop 180vh wrapper, mobile regular 540px stage."
radius: "8px controls, 12px media crops, 0px major color blocks. No pill-card SaaS grid. 2px black rules on yellow, white rules on blue."
---
# Running Shoe Product Launch Page — Design System
Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.
## Colors
- **Electric blue** `#0047FF` — Large hero half and specification bands. WCAG relative-luminance calculations: #080B13 text on #E4FF1A: 17.44:1; #FFFFFF text on #0047FF: 6.28:1; #FFFFFF text on #080B13: 19.67:1; #080B13 text on #FFFFFF: 19.67:1. Use these pairs for every normal-size label/body/button. Decorative overlaps/gradients carry no text; readable text gets a solid backing.
- **Volt yellow** `#E4FF1A` — Large hero half, sole, size tools.
- **Black** `#080B13` — Black type on yellow, dark outsole and rules.
- **White** `#FFFFFF` — Text on blue and opaque minimal reading panels.
## Typography
- **Display** — Barlow Condensed (OFL), weights 700. Self-host the font files.
- **Body** — Inter (OFL), weights 400/700. Self-host the font files.
## Spacing & shape
- Spacing: 1280px max, 48px desktop/20px mobile gutters; 8px baseline. 100px/56px section spacing, 140px desktop/64px mobile condensed display. Product stage sticky only in desktop 180vh wrapper, mobile regular 540px stage.
- Radius: 8px controls, 12px media crops, 0px major color blocks. No pill-card SaaS grid. 2px black rules on yellow, white rules on blue.
## Motion
- Oversized title shifts at most 16px across scroll without letter-splitting or clipping. Shoe rotation follows stage scroll, not a flat picture spin. Add persistent angle buttons and Follow scroll toggle for touch/keyboard.
- Specs count once over 650ms to their final values; use exact final values in accessible text from first render. Reduced motion disables counting and scroll transform. No autoplay spin.
## Imagery
Original geometry model plus three photorealistic campaign photographs of one invented no-logo running shoe: electric blue upper, volt twin-arch sole, squared toe, broad lace bridge and six small oval vents. Studio hard key light and crisp blue/yellow set repeated across product and runner shots. Fictional runner appears as lower legs only without face or identifiable brand. Hero cannot be typography alone: large 3D shoe plus side-shot photo thumbnail. Model remains the mechanism for smooth multi-angle rotation, not inconsistent independent photo frames.
## Tone
Energetic, direct and specific, without medical claims, athlete endorsements or fabricated laboratory results.
---
— Prompt by VibeFather · https://vibefather.ai/t/running-shoe-product-launch-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Make it yours
- A footwear startup: set BRAND and PRODUCT to your first model, enter your own WEIGHT_G and PRICE, and swap the colorway materials for your launch palette.
- A running apparel label: keep the angle viewer for a hero shoe, then rewrite the cushioning and drop copy to describe your own construction and fit.
- A product design studio: reuse the 3D rotation and angle buttons for a furniture or hardware concept, replacing the size finder with dimension notes.
- A sports retailer: point the local bag and size table at your in-store fitting service, and change the countdown to a demo of your seasonal drop.
Running Shoe Product Launch Page: questions and answers
Can I put the running shoe 3D model on a page for my own shoe brand?
The Running Shoe Product Launch Page template ships an invented shoe built from original geometry, not a real design, so you can reuse the architecture and the angle controls for your own concept. Set BRAND and PRODUCT in the content file, then rewrite the specifications and launch story to match your shoe. The prompt tells the agent to keep the original silhouette and avoid real brand emblems or copied commercial profiles.
How does the size finder and bag work without a checkout?
The Running Shoe Product Launch Page template includes a size finder that takes foot length and suggests a starting point from a transparent size table, plus a local bag that records size and quantity and totals it. Both stay in the browser: the bag never accepts an order or payment. Treat them as a fit and pricing preview, and connect your own store later if you need real transactions.
What can I change first in the Running Shoe Product Launch Page template?
Start with the four variables: BRAND, PRODUCT, WEIGHT_G and PRICE. The Running Shoe Product Launch Page template keeps every headline, label, alt text and confirmation in one content file, so changing those values updates the hero, the specification section and the bag summary together. Then adjust the colorway materials and the launch story copy to match your product.
Is the countdown on the shoe launch page a real drop timer?
No. The countdown in the Running Shoe Product Launch Page template is a browser-only demonstration that starts from a relative duration and expires honestly, with no calendar date and no claim of real stock pressure. It can be replayed. If you need a real launch timer, that requires your own scheduling logic outside the template's demo behavior.
What happens on the shoe page when a visitor prefers reduced motion or has no WebGL?
The Running Shoe Product Launch Page template switches to discrete static angle views and final specification values when reduced motion is on, so nothing is scrubbed by scrolling. If WebGL is unavailable, the page falls back to static photographic-style assets. Angle buttons also provide Side, Front, Heel and Top views without a mouse gesture, and a Follow scroll toggle restores scroll control after dragging.
How do I build a running shoe product launch page with AI?
Copy the full prompt (Pro) from this page or run npx vibefather add running-shoe-product-launch-page, replace [BRAND], [PRICE], [PRODUCT] and [WEIGHT_G] with your own content, and paste it into Claude Code, Codex, Cursor or another AI coding agent. The live demos were built from exactly that text.
Which AI model built the Running Shoe Product Launch Page demo?
The Everyday road runner case was built by GPT-6.1 Sol in Codex; the City training shoe case was built by GLM-5.3 in ZCode. Each build used the published prompt with nothing added, so you can compare the models side by side.
What tech stack and pages does the Running Shoe Product Launch Page template use?
Running Shoe Product Launch Page is a single-page site built with React, with drag & physics, scroll animation and 3d / webgl. The prompt fixes the stack so every AI tool builds the same kind of project, and the result runs as a static site you can host anywhere.
Is the Running Shoe Product Launch Page template free to use?
Running Shoe Product Launch Page is a Pro template: the brief, stack and variables are public, and the full prompt, the source code of the live demo and a commercial license come with VibeFather Pro. Its DESIGN.md is free for personal projects.
Does the Running Shoe Product Launch Page template work on mobile?
Yes. Every Running Shoe Product Launch Page build was tested on a phone-sized screen as well as desktop before it went live, checking layout, text size and touch targets. Open the live demo on your phone, or switch the preview on this page to mobile view, to check it yourself.