2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
This sea salt brand website starts with a surface you can disturb. Move a pointer or a finger across the opening scene and the water breaks into small ripples over a submerged wordmark. As the page moves, the waterline falls, exposing clay and clusters of salt. The material becomes the introduction to a fictional coastal producer, rather than a decorative background behind a sales pitch.
The rest of the page makes that opening useful. A three-part harvest story pairs short explanations with a changing overhead diagram and a photograph of the work. Three salt products each show a distinct texture, a tin size, a price and specific cooking suggestions. A visitor can add tins, change quantities, remove items and review an itemized demo order. A separate marsh walk section combines a coastal photograph, a small illustrated map and a local-only request form.
The design uses gray coastal light, mineral paper, fine dividing rules and a rounded serif paired with a clear sans serif. Photographs are deliberately unbranded, so a second fictional producer can use the same visual system while changing its name, coast, harvesters and salt collection. All copy and product data sit in one content module. The water wordmark changes with the producer as well.
This is suited to a small food maker that needs both atmosphere and understandable products. The finished example is static, with bundled fonts and images, touch-friendly controls and a reduced-motion presentation. Checkout and visit requests are clearly marked demonstrations; they do not send information or collect payment. Replace those interactions with an appropriate service when adapting the design to a working business.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Sea Salt Brand Website Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else. ## Brief Create an original tactile sea-salt storefront for [BRAND] at fictional [COAST]. The first screen is interactive water; scrolling exposes clay and clustered salt. Follow with an illustrated harvest story, three photographic salt products, a marsh visit request and a working local-only cart. - Audience: Home cooks, small restaurant buyers and visitors who care about texture, place and a modest hand process. - Goal: Let visitors feel the material, learn three harvest steps, choose useful salts and try a clearly labeled demo order or visit request. - Tone: Quiet, specific, unhurried US English. Warm craft without exaggerated claims. ## Stack - Framework: Vite + TypeScript - Styling: Vanilla CSS - Libraries: three (MIT), @fontsource/fraunces (OFL-1.1), @fontsource/manrope (OFL-1.1) - Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs. - Setup: - Use Vite with base ./ and build.sourcemap false; install all dependencies locally and add a build script. - Create one src/content.ts with all variables, product data, navigation, forms and image paths. Rewrite specific copy when variables change; B must not retain A brand or coast. - Use Three.js plus your own GLSL/CanvasTexture water scene, requestAnimationFrame and native scroll progress. No other WebGL engine. The scene must appear immediately with a visible fallback while loading. ## Variables - [BRAND] — Producer (default: "Morrow Salt"). A fictional small salt producer; use its wordmark in the water. - [COAST] — Fictional coast (default: "Alder Reach"). Invented location; do not imply a real producer. - [FOUNDERS] — Harvesters (default: "Nell & Rowan"). Two fictional harvesters. - [COLLECTION] — Three salts (default: "Tide Flake; Hearth Smoked; Marsh Herb"). Three distinct salts; rewrite flavors, cooking pairings and product names together. - [ACCENT] — Accent color (default: "#788575"). Muted botanical or coastal hex color. - [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/sea-salt-brand-website 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: "Sea Salt Brand Website"
colors:
paper: "#ECEBE5"
ink: "#263832"
water: "#6E8588"
clay: "#77716A"
salt: "#F9F6ED"
accent: "[ACCENT]"
typography:
display_and_wordmark: { family: "Fraunces", weights: [400, 500] }
body_and_ui: { family: "Manrope", weights: [400, 500, 600] }
spacing: "8px base. Desktop 32px outer gutters and max-width 1320px below hero. Sections 112px apart; mobile 20px gutters and 64px section spacing. Headlines 72px desktop / 42px phone, body 16–18px. Generous legible lines."
radius: "0–3px; rectangular photographs, fine rules, no pill-card grid."
---
# Sea Salt Brand Website — 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
- **Paper** `#ECEBE5` — Lower-page mineral paper background
- **Ink** `#263832` — Text and dark buttons
- **Water** `#6E8588` — Gray coastal water
- **Clay** `#77716A` — Revealed textured salt-pan base
- **Salt** `#F9F6ED` — Crystal highlights
- **Accent** `[ACCENT]` — Botanical product detail
## Typography
- **Display and wordmark** — Fraunces (OFL), weights 400/500. Self-host the font files.
- **Body and UI** — Manrope (OFL), weights 400/500/600. Self-host the font files.
## Spacing & shape
- Spacing: 8px base. Desktop 32px outer gutters and max-width 1320px below hero. Sections 112px apart; mobile 20px gutters and 64px section spacing. Headlines 72px desktop / 42px phone, body 16–18px. Generous legible lines.
- Radius: 0–3px; rectangular photographs, fine rules, no pill-card grid.
## Motion
- An initial 700ms water settle and 160ms nav reveal; copy never stays hidden waiting for animation.
- Water ripples respond to pointer/touch at their actual location with decay; native scrolling lowers tide continuously and reveals instanced crystal clusters.
- Harvest diagram changes in three readable progress states. Product button feedback is 140ms. Reduced motion uses settled states.
## Imagery
Five supplied photographic images in one cool overcast coastal shoot. Photographs show unbranded ingredients, rake and landscape without faces or text. The hero is original code-built WebGL water over clay, with the live brand wordmark refracted below. Do not substitute photographs for the interactive hero or treat code-drawn products as a substitute for the three supplied product photos.
## Tone
Quiet, specific, unhurried US English. Warm craft without exaggerated claims.
---
Inspired by Sea-salt WebGL concept in a designer model test by @Petras Baukys — https://muz.li/blog/openai-devday-2026-for-designers/
— Prompt by VibeFather · https://vibefather.ai/t/sea-salt-brand-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Make it yours
- A small coastal salt maker: set BRAND to your producer name, COAST to your shoreline, FOUNDERS to your harvesters and COLLECTION to your three salts, then rewrite the harvest story and product pairings.
- A spice or smoked-flavor producer: keep the water opening but set COLLECTION to three smoked or blended seasonings, rewrite cooking suggestions and use ACCENT to match your packaging.
- A farm or food maker running coastal visits: keep the marsh walk section, set COAST and FOUNDERS to your place and people, and point the visit request form at your own booking service.
- A designer building a portfolio piece for a food client: use the BRAND, COAST and ACCENT variables to show a second fictional producer, and swap the unbranded photographs for the client's own product shots.
Sea Salt Brand Website: questions and answers
Can I use the Sea Salt Brand Website template for a real business, not just a demo?
The Sea Salt Brand Website template is a Pro template, so commercial and client use is covered once you are a Pro member. The finished demo is static and its checkout and marsh visit request are labeled demonstrations that do not send information or collect payment. To run it as a working business, replace those interactions with an appropriate service before launch.
How do I change the brand name, coast and harvesters in the Sea Salt Brand Website template?
All copy, product data, image paths and links for the Sea Salt Brand Website template sit in one content module. Set the BRAND variable to your producer name, COAST to your fictional or real coast, FOUNDERS to your harvesters and COLLECTION to your three salts. The water wordmark and every headline, paragraph and label update from those values, so rewrite the default copy to match your new brand and coast.
What does the interactive water opening on the Sea Salt Brand Website actually do?
The Sea Salt Brand Website opens with a tidal water surface built with Three.js. Moving a pointer or a finger across the scene breaks the water into small ripples over a submerged wordmark. As the page scrolls, the waterline falls to expose clay and clusters of salt. The scene appears immediately with a visible fallback while loading and has a reduced-motion presentation.
How does the cart work on the Sea Salt Brand Website template?
The Sea Salt Brand Website template includes a working local-only cart. Visitors can add tins of the three salts, change quantities, remove items and review an itemized demo order. Checkout is clearly marked as a demonstration and does not collect payment or send information. For a live store, connect the cart to a payment and order service that suits your business.
What should I change first when adapting the Sea Salt Brand Website to my own salt or food product?
Start with the BRAND, COAST, FOUNDERS and COLLECTION variables in the content module, then rewrite every headline, paragraph, label and image path so no default brand or coast remains. Set ACCENT to a muted botanical or coastal hex color that fits your product. After that, replace the demo checkout and marsh visit request with real services, and check the water scene and controls on a phone.
How do I build a sea salt brand website with AI?
Copy the full prompt (Pro) from this page or run npx vibefather add sea-salt-brand-website, replace [BRAND], [COAST], [ACCENT] and [FOUNDERS] 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 Sea Salt Brand Website demo?
The Alder Reach salt case was built by GPT-6.1 Sol in Codex; the Bracken Inlet salt case was built by GPT-6.1 Sol in Codex. Each build used the published prompt with nothing added.
What tech stack and pages does the Sea Salt Brand Website template use?
Sea Salt Brand Website is a single-page site built with Plain HTML and Three.js, with scroll animation, cursor effects 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 Sea Salt Brand Website template free to use?
Sea Salt Brand Website 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 Sea Salt Brand Website template work on mobile?
Yes. Every Sea Salt Brand Website 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.