PROJECT SNAPSHOT - Blip Website Build

Date: 24 March 2026 Thread status: Pausing to create recovery document

1. Project Overview

What we’re building: A new single-page landing website for Blip (blipsupport.com / blip.ltd), Christian Malcolm’s boutique premium personal tech support business based in Vancouver, Canada.

The goal: Replace the current multi-page site at blipsupport.com with a clean, single-page landing site that converts visitors to “book a free call” consultations. The site needs to feel premium, warm, and human - Apple-inspired minimalism applied to a personal service.

The brief in one sentence: A sparse, gorgeous landing page with a hero video section showing AI-generated vignettes of real-feeling moments, hero text that rotates in sync with the videos, and a clear path to booking a call with Christian.

Client: Christian Malcolm. He works from home in Vancouver. His assistant Carrie is in London (remote only). He has a perfectionism/fear-of-failure pattern that causes him to over-prepare and delay shipping. This thread is actively working to counter that - small daily progress is the goal.

2. Key Decisions Made

Tech stack (locked)

• Framework: Astro + Tailwind CSS
• Hosting: Cloudflare Pages
• Version control: GitHub
• Contact form: Cloudflare Web Forms or Formspree (not yet decided)
• CMS: None for now - static content, update by editing files

Design direction (locked)

• Single-page architecture (not multi-page)
• Apple-inspired minimalism - sparse, generous white space, one message per section
• Left-aligned navy gradient wash over hero video (text sits on left, video breathes on right)
• Hero text rotates in sync with the video vignettes (paired moments)
• No pricing tables, no chat widgets, no stock photography grids
• Minimal nav: logo left, 3-4 links right, “Book a call” button always visible
• No parallax scrolling (research showed it disorients this audience)

Colour palette (locked)

• Navy: #0A2341
• Amber/gold accent: #D4A843
• CTA blue: #3B82F6
• Light blue-grey backgrounds: #F0F4F8
• White text on dark, near-black on light

Logo (decided)

The simple “blip” wordmark in the navy circle (lowercase white rounded sans-serif) is the strongest asset. Located at /mnt/Blip 26/previous blip assets/blip 241206/3.png (circle) and 4.png (square). SVG source at /mnt/Blip 26/previous blip assets/logo play/blip.svg.

Photography/imagery direction (decided)

• Hero video vignettes shot in “authentic iPhone 16 Pro footage” aesthetic (phone-feel, organic shake, natural light, no cinematic language)
• Lifestyle collages and cinematic AI images from previous work are discarded
• Supporting imagery (service cards etc.) should match the phone-footage aesthetic
• Christian’s headshot: use cm headshot vanu a.jpeg as working placeholder

Video hero concept (decided)

• AI-generated video vignettes in Kling, 10-15 seconds each
• All generated with the iPhone aesthetic formula (see exact prompt details in Section 5)
• Text overlay uses left-aligned navy gradient wash
• Hero headline text changes in sync with each video via JavaScript
• Progressive buffering: first clip loads instantly, subsequent clips buffer while current plays
• Hero headlines to be written after page structure is finalised
• Videos compressed to 3-5MB for web via FFmpeg H.264 CRF 28

Ruled out

• VS Code (decided to use Cursor or similar AI-assisted editor)
• Multi-page structure
• Parallax scrolling
• Pricing on the landing page
• The dot-grid icon logo variations
• The AI-generated lifestyle collages from “Blip 2025 hero” folder
• All-dark hero (Bold & Quiet Stitch layout)

3. Current State

Completed

• Comprehensive landing page brief synthesising 15 months of research (260318 - Landing Page Brief - Ready for Review.md)
• Full audit of live blipsupport.com site (findings in the brief)
• Audience design research (non-technical 40-60+, what builds trust, Apple-inspired principles)
• 7 vignette concepts brainstormed and documented
• 3 vignettes produced in Kling (see video files below)
• Kling prompt formula dialled in (see Section 5)
• Video loading strategy researched and documented
• 2 keeper videos compressed to web-ready format with poster images and blurred LQIP placeholders
• Google Stitch layout exploration (6 variations generated, reviewed, none adopted wholesale)
• Full asset review of previous blip assets folder
• Session recap written

In progress / partially done

• Hero video vignettes: 2 keepers done, 5 remaining (Printer Standoff, Password Spiral, Late-Night Worry, Deep Breath, and a revised Shop Owner)
• Shop owner vignette: 2 takes, neither fully satisfactory - needs revision with improved iPhone aesthetic prompt
• Layout direction: Stitch outputs reviewed but no final decision; “Personal Connection” layout closest to brand, elements from “Focused Clarity” and “Minimalist Flow” also useful
• Hero headlines: deliberately deferred until page structure is finalised
• Kling watermark: still present in all videos - needs clean re-export with paid credits

Not started

• Astro project initialisation (GitHub repo, Cloudflare Pages setup)
• Any actual code written
• Page copy (beyond what exists in research files)
• Service sub-pages (Tech Support, Online Safety, AI Coaching) - planned but not designed
• Newsletter/mailing list revival (secondary priority)
• Christian’s headshot (a real photo, not the current placeholder)

Known issues / watch-outs

• blipsupport.com has broken routing (nav link “How We Help” → 404, real page is /help/)
• Phone number inconsistency on current site (1-844-995-2547 vs 0333 444 5566) - needs resolving
• Domain decision not finalised: blip.ltd vs blipsupport.com vs premiumtechhelp.com
• All Kling-exported videos have a watermark - need clean exports
• Christian has perfectionism/delay pattern - small daily progress is the working approach

4. File Inventory

Created during this project (web work/Blip/)

Video assets (Blip 26/blip videos/)

Web-ready assets (Blip 26/blip videos/web-ready/)

Key brand assets (Blip 26/previous blip assets/)

Reference files (web work/Blip/Reference/) - pre-existing, not created by us

All of these were read and synthesised into the brief. Key ones:

• Tyson - Bridge Script A.md - Full video script with all client stories (Frances, Peter, Louisa) and Christian’s personal pitch
• Tyson - The Offer.md - Full subscription offer structure
• Tyson - Facebook Ad prompts - long thread - big summary.md - Massive research file with pain points, objections, audience data
• ChatGPT-Top Tech Pain Points.md - 5 pain point categories with copy
• Text Snippets.md - Key copy including “When tech feels overwhelming, we make it simple” and the digital butler pitch
• AI Coaching.md - AI coaching service description

External assets

• Tyson work.xlsx in /mnt/Blip 26/ - Pain points, headlines, taglines, bullets spreadsheet
• screencapture-stopthefrustration-2025-11-04-15_50_27.pdf - Competitor site capture
• Previous blip assets: Facebook ads (finals folder has best ones), Newsletter graphics, Blip 2025 hero collages (do not use)

5. Reference Material

The proven Kling video prompt formula

All successful vignettes used this structure. The family dinner take 2 is the gold standard:

Authentic, handheld iPhone 16 Pro footage of [scene description]. [Subject description with specific physical imperfections - natural wrinkles, grey hair, reading glasses, etc.]. [Setting description - specific domestic details]. [Action/emotional beat description - be specific about facial expressions and body movement]. [Subjects positioned in right two-thirds of frame, left third softer and out of focus for text overlay.] The camera has a slight organic shake, visible skin textures, stray hair, and natural motion blur. [Lighting - warm morning/evening light from window, no dramatic lighting]. No cinematic lighting; looks like a real moment someone captured on their phone. Single continuous shot, no camera cuts. 4K, 24fps.

Critical rules for Kling:

• NEVER use: “cinematic”, “35mm lens”, “shallow depth of field”, “colour grading”, “documentary style”
• ALWAYS use: “iPhone 16 Pro”, “organic shake”, “visible skin textures”, “natural motion blur”, “looks like a real moment captured on a phone”
• Specify physical imperfections to avoid the smooth-model default
• Two people max for reliable face rendering
• Specify “single continuous shot, no camera cuts” (multicam was an issue on early takes)
• Leave the left third of frame empty for text overlay
• Turn OFF multicam option in Kling settings

Video compression command (FFmpeg)

ffmpeg -i input.mp4 -c:v libx264 -crf 28 -preset slow -b:v 3000k -maxrate 4000k -bufsize 6000k -movflags +faststart -an output-web.mp4

Google Stitch project

URL: https://stitch.withgoogle.com/projects/16324443893887477340 6 layouts generated. None adopted wholesale. Closest to brand: “Personal Connection Layout” (founder-led, human-first). Also useful elements from “Focused Clarity” (structure, “Tech shouldn’t be a second job” line) and “Minimalist Flow” (breathing room, sparse). Discard: “Bold & Quiet Support” (too dark/corporate).

Key copy lines worth preserving

• “When tech feels overwhelming, we make it simple.” (Text Snippets)
• “Tech shouldn’t be a second job.” (Stitch generated - strong line, keep it)
• “You know us, we know you.” (from The Offer)
• “I’m a nerd, but I’m a nice nerd.” (Christian’s personal positioning)
• “No call centres. No account numbers. No strangers.” (differentiator)
• “We’ve kept the same clients for over 20 years.” (trust signal)
• “uh-oh” / “no more uh-oh” (from Facebook ads - right tone for ad campaigns)

Live site

• blipsupport.com (multi-page, has routing issues)
• Nav link “How We Help” → 404 (real page is /help/)
• Phone number inconsistency: 1-844-995-2547 (homepage) vs 0333 444 5566 (inner pages)
• Testimonials on site (verbatim, worth carrying forward): Howard Malin/Notting Hill Bookshop (20+ years), Paula Kahn (18 years), Stephen Gittins/AIM (20+ years), Ian Flooks/Wasted Talent (20+ years)

Audience research summary

Non-technical 40-60+, affluent, value: clean/spacious layouts, generous white space, large readable fonts, authentic photography, blue as dominant trust colour, Apple-inspired minimalism. Bounce triggers: slow load, clutter, technical jargon, dark/techy interfaces, generic stock photos. Trust signals: years of experience, real person photo, authentic testimonials, operator identity front and centre.

Astro skill

A skill called astro-static-site is available in this Cowork session. Invoke it when starting the actual build for the full workflow guide.

6. Restart Instructions

If opening a fresh thread, do this first:

1. Read this snapshot fully before doing anything else
2. Read 260318 - Landing Page Brief - Ready for Review.md - this is the master brief
3. Read 260321 - Hero Video Vignettes - Brainstorm.md - for context on the video work
4. Check the blip videos/ folder to see current state of video assets
5. Invoke the astro-static-site skill when starting the build
6. The next logical steps are (in order):
   • Finish remaining video vignettes (Printer Standoff, Password Spiral, Late-Night Worry, Deep Breath, revised Shop Owner) - use the proven Kling formula in Section 5
   • Re-export keeper videos without Kling watermark, then recompress
   • Pick a layout direction (Personal Connection as base, with Focused Clarity structure and Minimalist Flow breathing room)
   • Initialise Astro project (GitHub repo + Cloudflare Pages)
   • Build the hero section first (video + rotating text + CTA)
   • Write the hero headlines last, paired to each vignette
7. Remind Christian: small daily progress, imperfect is fine, keep moving