Stipple

Brand-photo consistency SaaS

by Hanan

Repo Live site

Description

Stipple is a landing page for a made-up tool that keeps a brand's photos consistent: a team sets one Style Card for grade, crop, type and colour, and every export follows it. The page is a black void of small floating cards. As you scroll, the hero's tiles fly into one card, which then morphs through the product and three customer examples.

Use it for:

a landing page for a design, photo or brand tool
a SaaS site that tells its story in one pinned scroll scene
a reference for morphing cards with GSAP ScrollTrigger

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5.5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. Claude writes the HTML, CSS and JavaScript and adds GSAP and Lenis.
Add stock photos
Pick around 18 full-colour sports and fashion photos from Unsplash or Pexels, save them in an images folder and ask Claude to convert them to WebP and use them.
Preview and fix
Ask Claude to start a local preview and scroll slowly through the hero. Check desktop and phone, then ask for one fix per message.
Publish
Upload the folder to any static host, such as GitHub Pages or Netlify, to share it.

Main prompt

Build a one-page landing site for Stipple, a SaaS that keeps every brand photo on brand. A team sets up one Style Card (grade, crop, type and colour) and every photo anyone exports runs through it. Headline: "Keep every image on brand."

Use plain HTML, CSS and JavaScript with GSAP ScrollTrigger and Lenis smooth scroll. No framework.

Design: a black background with small floating cards in three tones: blue #2A1BF2 (the only accent), dark #1C1C1C and paper #F2F2F0. Switzer for the interface and heavy uppercase wordmarks. Newsreader for the one heading style: a short serif line that types itself after a white dot. Cards have square corners; only buttons, pills and the dock are rounded. Buttons are white pills that turn blue on hover. Use full-colour sports and fashion photos with no captions on them.

Sections:
1. Loader: the hero tiles start as a fanned deck while a counter runs from 000, then deal out into place.
2. Hero, pinned while you scroll: six tiles. The Style Card widens and turns blue, the other tiles fly into its photo slots, and from then on one card morphs through the product and three customer examples, changing colour and retyping its heading each time.
3. How it works: four rules (grade, crop, type and colour) applied one by one to a raw photo.
4. Before and after: a feed of nine posts with a drag slider.
5. One shoot, every format: the Style Card deals out eight formats while a counter runs to 1,240 exports.
6. Pricing: three square cards, the middle one blue.
7. An FAQ and a sign-up footer.

Add a small dock pill at the bottom that appears after the hero and hides at the footer. Support reduced motion and lazy-load WebP photos.