> ## Documentation Index
> Fetch the complete documentation index at: https://docs.highailabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Strain Page Videos

> Convert static Professor High mascot images into short animated looping videos that bring strain detail pages to life.

<Note>
  **Status:** Archived concept — not current product or implementation guidance
  **Phase:** Phase 5 (AI Media)  |  **Tier:** N/A (Platform Enhancement)
</Note>

<Warning>
  This page preserves early product exploration only. It does not authorize
  automatic generation, unlimited usage, a provider, a model, public storage,
  or customer-data processing. Current notebook companion execution is off;
  see [Notebook Media Governance](/guides/platform/notebook-media-governance).
</Warning>

## Overview

Every strain in the TIWIH database has a detail page at `/strains/[slug]` on the website. Each page features a custom AI-generated Professor High mascot image — a pineapple scientist character rendered in a visual style that reflects the strain's personality. These images are distinctive and well-received, but they are static. A still image in a world of moving content.

Strain Page Videos replaces those static images with short, looping animated videos. The Professor High mascot subtly moves — perhaps adjusting his lab coat, swirling a beaker of colorful terpene liquid, or glancing around with curiosity. The animation is 3-6 seconds, seamless-looping, and designed to feel alive without being distracting. Think of it as a GIF upgrade — not a full video experience, but a premium polish that makes the website feel like it belongs in 2026 rather than 2016.

This is not a user-facing AI media feature in the way podcasts or music are. Users do not generate these. This is a platform enhancement — an investment in the quality of the website experience that benefits every visitor, free or paid. The animated strains appear on strain detail pages, in search results (as hover previews), on the homepage hero section, and on strain cards throughout the site. The cumulative effect is a website that feels alive, premium, and unlike anything else in the cannabis space.

The practical argument is engagement. Animated content holds attention longer than static content. A strain page with a subtly moving mascot keeps visitors on the page slightly longer, which improves SEO dwell time metrics and increases the chance they explore further. The aesthetic argument is brand differentiation. No other cannabis encyclopedia has animated character art for 5,000+ strains. This is visible quality that communicates craftsmanship.

## What It Does

* **Strain detail pages** — The main hero image becomes an animated loop. The video loads silently on scroll (autoplay, muted, looping). Falls back to the static image if video fails to load.
* **Homepage hero section** — Featured strains in the hero area use animated mascots, creating movement that draws the eye.
* **Search results** — Strain cards in search results show a brief animation on hover (desktop) or on tap-and-hold (mobile).
* **Strain cards** — Any component that displays a strain thumbnail can optionally use the animated version.
* **Social sharing** — When a strain page is shared, the Open Graph preview can use an animated GIF version of the video.

### Animation Styles

The animation is subtle and character-appropriate. Professor High is a scientist, so the movements are measured, curious, and slightly playful:

* **Idle breathing** — Gentle rise and fall, slight head tilt. The minimum viable animation.
* **Beaker swirl** — The Professor swirls a beaker containing colored liquid that matches the strain's dominant terpene color.
* **Notebook scribble** — The Professor jots something in a notebook, glances up, and goes back to writing.
* **Examine specimen** — The Professor holds up a magnifying glass to examine something just off-screen.
* **Lab ambiance** — Subtle background movement — smoke wisps, bubbling beakers, blinking equipment — while the Professor remains mostly still.

The specific animation varies per strain (seeded by the strain's data), so not every page looks the same.

## User Value

<Tip>
  Animated content is the difference between a website that feels like a reference database and one that feels like a living encyclopedia. The user may not consciously notice the animation — but they will unconsciously feel that the site is higher quality, more modern, and more worth spending time on. This is about perceived value, not feature value.
</Tip>

## Technical Approach

### Generation Pipeline

<Steps>
  <Step title="Source Image Selection">
    Start with the existing Professor High mascot image for each strain. These are already stored in Supabase Storage / CDN and are high quality (1024x1024 or larger).
  </Step>

  <Step title="Image-to-Video Generation">
    Send the source image to an AI video generation API with a prompt describing the desired animation: "Gentle idle animation of a pineapple scientist character. Subtle breathing motion, slight head tilt. Background elements have minimal movement. Seamless loop. 3 seconds. Calm, professional, slightly playful." The API generates a short video clip.
  </Step>

  <Step title="Loop Processing">
    The raw video is processed to ensure seamless looping — the last frame must transition smoothly to the first frame. FFmpeg can blend the endpoints or the generation prompt can specify loop constraints.
  </Step>

  <Step title="Format and Compression">
    The video is encoded in two formats: WebM (VP9, for Chrome/Firefox, smaller file size) and MP4 (H.264, for Safari/iOS, universal compatibility). Both are aggressively compressed — the target is under 500KB per video. A static poster frame is extracted for the loading state.
  </Step>

  <Step title="CDN Upload">
    Both formats plus the poster frame are uploaded to CDN storage, organized by strain slug. The URL pattern is predictable: `/videos/strains/{slug}/mascot-loop.webm`.
  </Step>

  <Step title="Progressive Rollout">
    Start with the top 100 strains by popularity rank (Blue Dream, OG Kush, Girl Scout Cookies, etc.). Expand to top 500. Then batch-generate for the full database (2,500+ researched strains). Strains without videos gracefully fall back to the static image.
  </Step>
</Steps>

### Video Generation APIs

| Provider                   | Quality     | Speed      | Cost/Video                | Loop Quality             | Notes                                     |
| -------------------------- | ----------- | ---------- | ------------------------- | ------------------------ | ----------------------------------------- |
| **Runway Gen-3**           | High        | 30-90 sec  | $0.10-$0.50               | Good with prompting      | Best quality, highest cost                |
| **Kling**                  | High        | 30-60 sec  | $0.05-$0.20               | Moderate                 | Good image-to-video, Chinese provider     |
| **Pika**                   | Medium-High | 15-45 sec  | $0.05-$0.15               | Good                     | Fast, good for character animation        |
| **Stable Video Diffusion** | Medium      | 60-180 sec | $0.02-$0.05 (self-hosted) | Requires post-processing | Cheapest, requires own GPU infrastructure |

### Frontend Implementation

```
<video
  autoplay
  muted
  loop
  playsinline
  poster="/images/strains/{slug}/mascot.webp"
  preload="none"
>
  <source src="/videos/strains/{slug}/mascot-loop.webm" type="video/webm" />
  <source src="/videos/strains/{slug}/mascot-loop.mp4" type="video/mp4" />
  <img src="/images/strains/{slug}/mascot.webp" alt="{strain name}" />
</video>
```

**Performance considerations:**

| Optimization       | Implementation                                                         |
| ------------------ | ---------------------------------------------------------------------- |
| **Lazy loading**   | Intersection Observer — only load video when element enters viewport   |
| **Preload none**   | Do not download video until play is triggered                          |
| **Poster frame**   | Show static image immediately; video replaces it when loaded           |
| **Size budget**    | Target under 500KB per video (WebM) / 750KB (MP4)                      |
| **Resolution**     | 512x512 max for card views; 768x768 for hero/detail views              |
| **Reduced motion** | Respect `prefers-reduced-motion` — show static image for accessibility |
| **Mobile data**    | Consider skipping video on cellular connections (Save Data header)     |

### Storage Estimates

| Scope           | Videos | Size (WebM) | Size (MP4) | Total  |
| --------------- | ------ | ----------- | ---------- | ------ |
| Top 100 strains | 100    | 50 MB       | 75 MB      | 125 MB |
| Top 500 strains | 500    | 250 MB      | 375 MB     | 625 MB |
| Full database   | 2,525  | 1.3 GB      | 1.9 GB     | 3.2 GB |

CDN storage for 3.2 GB is negligible in cost. Bandwidth is the primary consideration — but with lazy loading and aggressive compression, most page views will only load 1-2 videos.

## Tier Impact

| Tier | Access                                                                                                      |
| ---- | ----------------------------------------------------------------------------------------------------------- |
| Free | Animated mascots are visible to all website visitors — this is a platform enhancement, not a gated feature. |
| Pro  | Same experience. This is not a paid feature.                                                                |

<Info>
  Strain Page Videos is a platform investment, not a monetized feature. It improves the experience for everyone and raises the perceived quality of the entire brand. Gating animated images behind a paywall would feel petty and would reduce the brand-building benefit.
</Info>

## Dependencies

* [x] Professor High mascot images for all strains — **built and live**
* [x] Strain detail pages at `/strains/[slug]` — **built and live**
* [x] CDN storage infrastructure — **built and live**
* [ ] AI video generation API integration (Runway, Pika, Kling, or SVD)
* [ ] Video compression and loop processing pipeline
* [ ] Frontend `<video>` component with lazy loading and fallback
* [ ] Intersection Observer integration for viewport-triggered playback
* [ ] Batch generation pipeline for 2,500+ strains
* [ ] `prefers-reduced-motion` and Save Data header handling

## Open Questions

1. **Video format** — WebM is smaller but not supported in Safari. MP4 is universal but larger. Serving both (with `<source>` fallback) is the standard approach but doubles storage. Is the size difference significant enough to justify dual formats, or should we go MP4-only for simplicity?

2. **File size budget** — 500KB per video at 512x512 is aggressive. Is it achievable with 3-second loops? Need to benchmark actual outputs from different providers. If 500KB is not realistic, the performance impact needs re-evaluation.

3. **How many strains to start with** — Top 100 is a safe start that covers the most-visited pages. But the "every strain has an animation" effect is more impressive. What is the cost and timeline to generate all 2,525?

4. **Autoplay behavior on mobile** — iOS Safari autoplays muted inline video, but battery and data considerations may make this annoying on mobile. Should mobile default to static images with a tap-to-animate interaction?

5. **Animation consistency** — AI video generation from images can produce unpredictable results. Some mascots might animate beautifully; others might distort or move unnaturally. Need a quality review pipeline — either automated (detect distortion) or manual (review top 100, batch-approve the rest).

6. **SEO impact** — Does replacing `<img>` with `<video>` (with `<img>` fallback) affect image SEO? The poster frame should be indexed, but need to verify that search engines handle the fallback correctly.

## Related Features

* [Strain Art](/planning/ai-media/strain-art) — User-specific art vs. platform-wide animated mascots; different purposes
* [Blog AI Content](/planning/ai-media/blog-ai-content) — Blog articles could also feature animated visuals
* [Video Reports](/planning/ai-media/video-reports) — Shares video generation infrastructure
* [AI Music Videos](/planning/ai-media/ai-music-videos) — Animated mascots could appear in personalized music videos