Skip to main content
Status: Brainstorm Phase: Phase 5 (AI Media) | Tier: N/A (Platform Enhancement)

​
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

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.

​
Technical Approach

​
Generation Pipeline

1

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).
2

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.
3

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.
4

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.
5

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.
6

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 (5,226+ strains). Strains without videos gracefully fall back to the static image.

​
Video Generation APIs

ProviderQualitySpeedCost/VideoLoop QualityNotes
Runway Gen-3High30-90 sec0.10−0.10-0.50Good with promptingBest quality, highest cost
KlingHigh30-60 sec0.05−0.05-0.20ModerateGood image-to-video, Chinese provider
PikaMedium-High15-45 sec0.05−0.05-0.15GoodFast, good for character animation
Stable Video DiffusionMedium60-180 sec0.02−0.02-0.05 (self-hosted)Requires post-processingCheapest, 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:
OptimizationImplementation
Lazy loadingIntersection Observer — only load video when element enters viewport
Preload noneDo not download video until play is triggered
Poster frameShow static image immediately; video replaces it when loaded
Size budgetTarget under 500KB per video (WebM) / 750KB (MP4)
Resolution512x512 max for card views; 768x768 for hero/detail views
Reduced motionRespect prefers-reduced-motion — show static image for accessibility
Mobile dataConsider skipping video on cellular connections (Save Data header)

​
Storage Estimates

ScopeVideosSize (WebM)Size (MP4)Total
Top 100 strains10050 MB75 MB125 MB
Top 500 strains500250 MB375 MB625 MB
Full database5,2262.6 GB3.9 GB6.5 GB
CDN storage for 6.5 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

TierAccess
FreeAnimated mascots are visible to all website visitors — this is a platform enhancement, not a gated feature.
ProSame experience. This is not a paid feature.
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.

​
Dependencies

  • Professor High mascot images for all strains — built and live
  • Strain detail pages at /strains/[slug] — built and live
  • 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 5,226+ 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 5,226?
  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.
  • Strain Art — User-specific art vs. platform-wide animated mascots; different purposes
  • Blog AI Content — Blog articles could also feature animated visuals
  • Video Reports — Shares video generation infrastructure
  • AI Music Videos — Animated mascots could appear in personalized music videos