Context-Aware Discovery Engine

Solving the 'Cold Start' Discovery Problem via Sentiment Analysis.

A "Zero-Party Data" prototype designed to solve the 'Cold Start' discovery problem.

Traditional personalization relies on deep user history. This Discovery Engine inverts the model by explicitly capturing user context ("Mood") to generate high-relevance recommendations immediately.

Built as a lightweight, dependency-free application, it demonstrates a Federated Search architecture: mapping abstract user sentiments to concrete metadata taxonomies and fetching real-time media assets via external REST APIs.

A single-file, no-framework web app that turns vibes into watch-and-read lists. Type a mood (“melancholy,” “epic,” “playful”) or pick from 50 supported moods, and the app instantly recommends 4 titles tailored to your mood across Comics, Movies, or TV via a sticky Media Dropbox.

Each pick shows a clean one-liner rationale, live cover thumbnails (auto-fetched from Wikipedia with local caching), and a details overlay with summary, tags, and a single “Where to Watch” pill for fast streaming lookups.

The interface is intentionally minimal: centered card, big input, Enter-to-submit, subtle animated “mood atmospheres,” and a scrollable mood rail with keyboard focus states.

Everything ships in one `index.html` with zero dependencies (≤60KB in V1, ~100KB in V2), portable, fast, and easy to host.

V2 (Q4 2026): Same engine, new visual layer

V1 was built with GPT-5 in 2025. For V2, I used Claude Opus 5.5 to rebuild only the presentation layer. The mood data, fuzzy matching, Wikipedia covers, caching and details overlay carry over line for line, and V1’s end-to-end test still passes against V2.

The same Movies recommendation in V1 (light cards on a flat purple gradient) and V2 (dark liquid-glass panels over an animated mood field with large covers)

Living mood field: A WebGL shader replaces the static gradients. Each core mood has its own palette and motion: melancholy drifts slow and blue, fun moves fast in neon, noir sits near-black with magenta and teal. Switching moods blends one into the next.
Liquid glass: Panels and controls refract the field behind them, using per-element SVG displacement with a slight chromatic split at the edges, plus specular rims.
Covers as the hero: Larger covers deal in with a stagger, tilt toward the cursor under a moving glare, and tint the background with their own colours.
Cover-to-details morph: Clicking a cover expands it into the details card (View Transitions API), over a blurred copy of the cover art.
Segmented media switch: Comics, Movies and TV are always visible, so switching takes one click instead of two.
Kinetic details: The selected mood rises in letter by letter, and Inspire Me spins through moods like a slot reel before it lands.
Phone and tablet layouts: V1 was desktop-only.
Adaptive quality: The page measures its own frame rate and steps effects down on slower devices, and it respects reduced-motion settings.

V2 details overlay: the cover enlarged beside the title, summary and a glowing Where to Watch button, over a blurred copy of the cover art

V2 on tablet and phone, with the moods as a scrolling strip and the covers in a two-by-two grid

What Makes It Special

Semantic Sentiment Mapping: Flexible parsing (synonyms + fuzzy matching) maps free-text to curated mood sets with 3 unique + 1 overlap per mood to keep variety high.
Tri-media switching: Comics/Movies/TV toggle in one click; recommendations, covers, and overlay adapt instantly.
Instant visuals: Wikipedia cover fetch with localStorage caching and graceful SVG fallbacks, snappy on repeat visits.
Thoughtful UX polish: Sticky headers, pill hover/selected states, animated color “atmospheres,” and a non-scrolling thumbnail grid that always aligns to the main card.
Accessibility baked in: Semantic roles, labels, ARIA for live regions/menus, visible focus rings, and full keyboard support.
Resilient by design: Popular-picks fallback for unknown moods, defensive network handling, and E2E QA before every ship.
Zero-Dependency Architecture: Pure HTML + CSS + Vanilla JS, drop it on GitHub Pages, Netlify, or email the file and it just works.

Recent highlights

Details Overlay: One-tap summaries, genres, year/author, and a clean “Where to Watch” pill.
Smart Inspire: Surfaces a mood you haven’t used recently, keeps discovery fresh.
Dynamic Mood Atmospheres: Unique animated gradients per mood; smooth transitions without layout issues.

Prototyping

Project Description

Solving the 'Cold Start' Discovery Problem via Sentiment Analysis.

A "Zero-Party Data" prototype designed to solve the 'Cold Start' discovery problem.

Traditional personalization relies on deep user history. This Discovery Engine inverts the model by explicitly capturing user context ("Mood") to generate high-relevance recommendations immediately.

V2 (Q4 2026): Same engine, new visual layer

V1 was built with GPT-5 in 2025. For V2, I used Claude Opus 5.5 to rebuild only the presentation layer. The mood data, fuzzy matching, Wikipedia covers, caching and details overlay carry over line for line, and V1’s end-to-end test still passes against V2.

Living mood field: A WebGL shader replaces the static gradients. Each core mood has its own palette and motion: melancholy drifts slow and blue, fun moves fast in neon, noir sits near-black with magenta and teal. Switching moods blends one into the next.

Liquid glass: Panels and controls refract the field behind them, using per-element SVG displacement with a slight chromatic split at the edges, plus specular rims.

Covers as the hero: Larger covers deal in with a stagger, tilt toward the cursor under a moving glare, and tint the background with their own colours.

Cover-to-details morph: Clicking a cover expands it into the details card (View Transitions API), over a blurred copy of the cover art.

Segmented media switch: Comics, Movies and TV are always visible, so switching takes one click instead of two.

Kinetic details: The selected mood rises in letter by letter, and Inspire Me spins through moods like a slot reel before it lands.

Phone and tablet layouts: V1 was desktop-only.

Adaptive quality: The page measures its own frame rate and steps effects down on slower devices, and it respects reduced-motion settings.

What Makes It Special

Semantic Sentiment Mapping: Flexible parsing (synonyms + fuzzy matching) maps free-text to curated mood sets with 3 unique + 1 overlap per mood to keep variety high.

Tri-media switching: Comics/Movies/TV toggle in one click; recommendations, covers, and overlay adapt instantly.

Instant visuals: Wikipedia cover fetch with localStorage caching and graceful SVG fallbacks, snappy on repeat visits.

Thoughtful UX polish: Sticky headers, pill hover/selected states, animated color “atmospheres,” and a non-scrolling thumbnail grid that always aligns to the main card.

Accessibility baked in: Semantic roles, labels, ARIA for live regions/menus, visible focus rings, and full keyboard support.

Resilient by design: Popular-picks fallback for unknown moods, defensive network handling, and E2E QA before every ship.

Zero-Dependency Architecture: Pure HTML + CSS + Vanilla JS, drop it on GitHub Pages, Netlify, or email the file and it just works.

Recent highlights

Details Overlay: One-tap summaries, genres, year/author, and a clean “Where to Watch” pill.

Smart Inspire: Surfaces a mood you haven’t used recently, keeps discovery fresh.

Dynamic Mood Atmospheres: Unique animated gradients per mood; smooth transitions without layout issues.

Ready to ship?
Let's talk.

Prototyping

Context-Aware Discovery Engine

Project Description

Solving the 'Cold Start' Discovery Problem via Sentiment Analysis.

A "Zero-Party Data" prototype designed to solve the 'Cold Start' discovery problem.

Traditional personalization relies on deep user history. This Discovery Engine inverts the model by explicitly capturing user context ("Mood") to generate high-relevance recommendations immediately.

V2 (Q4 2026): Same engine, new visual layer

V1 was built with GPT-5 in 2025. For V2, I used Claude Opus 5.5 to rebuild only the presentation layer. The mood data, fuzzy matching, Wikipedia covers, caching and details overlay carry over line for line, and V1’s end-to-end test still passes against V2.

Living mood field: A WebGL shader replaces the static gradients. Each core mood has its own palette and motion: melancholy drifts slow and blue, fun moves fast in neon, noir sits near-black with magenta and teal. Switching moods blends one into the next.

Liquid glass: Panels and controls refract the field behind them, using per-element SVG displacement with a slight chromatic split at the edges, plus specular rims.

Covers as the hero: Larger covers deal in with a stagger, tilt toward the cursor under a moving glare, and tint the background with their own colours.

Cover-to-details morph: Clicking a cover expands it into the details card (View Transitions API), over a blurred copy of the cover art.

Segmented media switch: Comics, Movies and TV are always visible, so switching takes one click instead of two.

Kinetic details: The selected mood rises in letter by letter, and Inspire Me spins through moods like a slot reel before it lands.

Phone and tablet layouts: V1 was desktop-only.

Adaptive quality: The page measures its own frame rate and steps effects down on slower devices, and it respects reduced-motion settings.

What Makes It Special

Semantic Sentiment Mapping: Flexible parsing (synonyms + fuzzy matching) maps free-text to curated mood sets with 3 unique + 1 overlap per mood to keep variety high.

Tri-media switching: Comics/Movies/TV toggle in one click; recommendations, covers, and overlay adapt instantly.

Instant visuals: Wikipedia cover fetch with localStorage caching and graceful SVG fallbacks, snappy on repeat visits.

Thoughtful UX polish: Sticky headers, pill hover/selected states, animated color “atmospheres,” and a non-scrolling thumbnail grid that always aligns to the main card.

Accessibility baked in: Semantic roles, labels, ARIA for live regions/menus, visible focus rings, and full keyboard support.

Resilient by design: Popular-picks fallback for unknown moods, defensive network handling, and E2E QA before every ship.

Zero-Dependency Architecture: Pure HTML + CSS + Vanilla JS, drop it on GitHub Pages, Netlify, or email the file and it just works.

Recent highlights

Details Overlay: One-tap summaries, genres, year/author, and a clean “Where to Watch” pill.

Smart Inspire: Surfaces a mood you haven’t used recently, keeps discovery fresh.

Dynamic Mood Atmospheres: Unique animated gradients per mood; smooth transitions without layout issues.

Ready to ship?Let's talk.

Ready to ship?
Let's talk.