PROJECT SNAPSHOT - Blip Website Build (v2)

Date: 24 March 2026, evening session Thread status: Pausing for housekeeping after productive vignette session

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 (mail@blip.ltd). 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 AI, 10-15 seconds each
• All generated with the iPhone aesthetic formula (see 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

Video reel pacing and tone (decided, this session)

• The reel needs breathing room between emotionally distinct clips
• Clips should cycle through varied emotional registers: delight, calm, relief, flow state, serenity
• The Ambient Studio clip functions as a palette cleanser between more emotional vignettes
• The Hillside Serenity clip is the purest “after” state - no tech, no arc, just freedom
• Not every vignette needs a problem-to-solution arc; some should simply show the outcome

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, plus 2 new concepts added (Ambient Studio, Hillside Serenity)
• Kling prompt formula fully 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 (v5 and v6 only)
• Google Stitch layout exploration (6 variations generated, reviewed, none adopted wholesale)
• Full asset review of previous blip assets folder
• Facebook ad image analysis: FB2412-00019.jpg (black and white yoga man) was the only image that got consistent clicks. Analysis: direct eye contact + genuine warmth, aspirational-but-attainable demographic, complete absence of technology in frame, black and white editorial quality, outdoor freedom setting. This insight shaped the Hillside Serenity vignette.

Keeper videos (5 total)

1. v3 Shop Owner take 3 - white woman, early 50s, silver-streaked dark hair, opening a boutique, laptop loads and she smiles. KEEPER.
2. v4 Late-Night Worry - white man, mid-to-late 40s, on sofa in the evening, sees something suspicious on tablet, sends a message, shoulders drop with relief. KEEPER.
3. v5 Curious Learner - Black man, 60s, in a bright kitchen, discovers something delightful on a tablet, laughs. KEEPER.
4. v6 Family Dinner take 2 - East Asian mother and daughter, kitchen table, daughter shows surprise/impressed reaction when mum knows about tech. KEEPER.
5. v8 Ambient Studio - white woman, early-to-mid 40s, in a bright ceramics studio, painting glaze onto a ceramic piece, laptop and printer visible in background admin corner. Content, in flow. KEEPER.

On hold / needs revisiting

• v7 Deep Breath take 2 - white woman, late 30s, auburn wavy hair, at a cafe with closed laptop, sitting contentedly. Decent but may not be needed given the reel’s current depth. ON HOLD.
• v9 Hillside Serenity take 2 - white man, late 60s, silver hair, standing on a grassy hillside looking out at rolling hills with wind in his hair. Good energy but facing away from camera - needs a take 3 where he’s in three-quarter profile so we see his face. ON HOLD.

In progress / partially done

• 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 before final web compression

Not started

• Astro project initialisation (GitHub repo, Cloudflare Pages setup)
• Any actual code written
• Page copy (beyond what exists in research files)
• Web compression of new keeper videos (v3 take 3, v4, v8) - waiting on watermark-free re-exports
• 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)
• The “snippets” section Christian mentioned (location not confirmed)

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 before final compression
• Christian has perfectionism/delay pattern - small daily progress is the working approach

4. File Inventory

Project documents (web work/Blip/)

Video assets (Blip 26/blip videos/)

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

Note: web-ready versions of v3 take 3, v4, and v8 still need to be created (after watermark-free re-exports from Kling).

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: Newsletter graphics, Blip 2025 hero collages (do not use)

5. Reference Material

The proven Kling video prompt formula

All successful vignettes used this structure:

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 (wrinkles, smile lines, grey hair, freckles, stray wisps of hair, no heavy makeup)
• 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 before every generation
• For stable/positive clips: avoid action verbs that imply transitions (e.g. “closes laptop” gets interpreted as “finishing stressful work” and Kling adds a worried face). Describe the end state directly instead.
• Kling defaults to athletic/model bodies - specify “normal slender build” or “average build” when needed
• Kling adds accessories unprompted - explicitly state “no earphones, no headphones, no sunglasses, no accessories” when you want a clean subject
• For fashion: “fully buttoned” and specific garment types prevent Kling from opening shirts or glamorising outfits
• Describe the relief/positive emotion with more words than the negative emotion to bias Kling’s emotional weighting toward resolution
• Wide shots (“wide shot showing full figure”) prevent Kling from defaulting to intense close-ups
• Overcast/soft light prevents Kling from creating dramatically lit fashion-shoot aesthetics

Kling prompt examples that produced keepers

v3 Shop Owner take 3 (keeper):

Authentic, handheld iPhone 16 Pro footage of a woman in her early 50s unlocking the front door of a small boutique clothing shop and stepping inside. She has natural silver streaks in her dark hair, visible smile lines around her eyes, and no heavy makeup — she looks like someone who runs her own business, not a model. She wears a relaxed linen jacket and carries a canvas tote bag. She sets her bag on the counter, opens her laptop, and watches it boot up. When the screen loads, she exhales softly and smiles to herself — a small, private moment of relief. Her posture relaxes. Subject positioned in the right two-thirds of frame, left third is softer and out of focus with the boutique interior visible but blurred for text overlay. The camera has a slight organic shake, visible skin textures, stray wisps of hair at her temple, and natural motion blur on her hands. Warm morning light through the shop windows, no dramatic lighting. No cinematic lighting; looks like a real moment someone captured on their phone. Single continuous shot, no camera cuts. 4K, 24fps.

v4 Late-Night Worry (keeper):

Authentic, handheld iPhone 16 Pro footage of a man in his mid-to-late 40s sitting on a sofa in the evening, holding a tablet. He has light stubble with some grey in it, slightly dishevelled hair, reading glasses on, and natural tired-at-the-end-of-the-day features — visible lines around his eyes, no polished appearance. He's wearing a plain t-shirt or casual long-sleeved top. As he reads, his expression shifts — not dramatic alarm, just the quiet frown of someone who has seen something that doesn't look right: a suspicious message, an unfamiliar alert. He reaches for his phone on the cushion beside him and taps out a short message, calm but purposeful. He sets the phone down and waits a beat. Then his shoulders drop. The frown clears completely. He lets out a quiet breath, puts the tablet face-down on the sofa beside him, and leans back with a look of easy relief — the particular calm of knowing someone else has it covered. Subject positioned in right two-thirds of frame, left third shows soft-focus living room interior for text overlay. The camera has a slight organic shake, visible skin textures, natural motion blur. Warm glow from a single floor or table lamp, no overhead lighting. No cinematic lighting; looks like a real moment someone captured on their phone. Single continuous shot, no camera cuts. 4K, 24fps.

v8 Ambient Studio (keeper):

Authentic, handheld iPhone 16 Pro footage of a woman in her early to mid-40s sitting at a workbench in a bright studio, carefully painting glaze onto a small ceramic piece with a fine brush. She has dark hair pulled back practically, a natural face with no heavy makeup and some visible smile lines, and focused capable hands with faint traces of glaze on her fingers. She's wearing a simple work apron over a plain top. Her expression is absorbed and quietly content — the unhurried focus of someone doing work they're genuinely good at. Around her: rows of finished painted ceramic pieces on open shelves, small pots of coloured glaze, the quiet evidence of a working studio. In the soft background, a side counter holds an open laptop and a small printer alongside it — visible but peripheral, the admin corner of a real small business. The studio is bright and airy, whitewashed walls, strong natural light from a large window. Subject in right two-thirds of frame, left third shows soft-focus studio interior for text overlay. The camera has a slight organic shake, visible skin textures, natural motion blur on her hands. Warm natural daylight, no dramatic lighting. No cinematic lighting; looks like a real moment someone captured on their phone. Single continuous shot, no camera cuts. 4K, 24fps.

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

Facebook ad image analysis (FB2412-00019.jpg)

The B&W yoga man was the only image in the December 2024 Facebook ad run that got consistent views and clicks. Analysis of why it resonated:

• Direct eye contact with genuine warmth - stops the scroll, creates personal connection
• Aspirational-but-attainable demographic - fit, silver-haired man in his 60s-70s who looks vital and grounded, not diminished by age
• Complete absence of technology - the most powerful element; the unspoken message is “when your tech is handled, this is what your life looks like”
• Black and white treatment - editorial, timeless quality; stands out in a colourful Facebook feed
• Outdoor freedom setting - rolling hills, open sky, space - the opposite of being stuck at a desk with a tech problem
• The juxtaposition - a tech support ad with zero tech in frame sells the outcome, not the service

This analysis directly informed the Hillside Serenity vignette concept.

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)
• “You’ve got other things you want to be doing with your life.” (emerged from Hillside Serenity vignette discussion - strong hero headline candidate)

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.

prompt-master skill

The prompt-master skill is available and was used throughout this session to build Kling prompts. It handles tool-specific prompt optimisation. Invoke it when building prompts for any AI tool.

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 original 7 vignette concepts
4. Check the blip videos/ folder to see current state of video assets
5. The next logical steps are (in priority order): a. Hillside Serenity take 3 - revise the prompt to specify three-quarter profile (facing slightly toward camera) so we see his face. Everything else about take 2 was good. b. Decide on Deep Breath - v7 take 2 is on hold. With 5 keepers already, this may not be needed. Review the reel’s emotional spread and decide. c. Re-export keeper videos from Kling without the watermark (requires paid credits in Kling), then recompress using the FFmpeg command in Section 5 d. Web-compress all new keepers (v3 take 3, v4, v8) once watermark-free versions are available - produce poster images and LQIP placeholders for each e. Additional vignettes as ideas strike - Christian is open to this. The Printer Standoff (v1) from the original brainstorm is still available. The Password Spiral (v2) is lower priority since we now have a male (v4). f. Pick final layout direction from Stitch outputs (or hybrid approach) g. Initialise Astro project (GitHub repo + Cloudflare Pages setup) - invoke the astro-static-site skill h. Build the hero section first (video + rotating text + CTA) i. Write hero headlines last, paired to each vignette
6. Invoke the prompt-master skill when building any new Kling prompts
7. Remind Christian: small daily progress, imperfect is fine, keep moving

Demographic spread of current keepers

• v3: White woman, early 50s (Shop Owner)
• v4: White man, mid-to-late 40s (Late-Night Worry)
• v5: Black man, 60s (Curious Learner)
• v6: East Asian mother + daughter (Family Dinner)
• v8: White woman, early-to-mid 40s (Ambient Studio)
• v9 (pending): White man, late 60s (Hillside Serenity)

Core audience is white women 40-60+. The reel currently has two white women and good diversity across the other slots. Future vignettes should continue to represent this core demographic while maintaining variety.

User preferences

• UK spelling throughout (colour, favourite, etc.)
• Names: always Carrie (not Carey), always Derrick (not Derek)
• No em dashes - use short hyphens sparingly