# Inspiration Catalog

| ID | Title | Source | Author | Asset | Status | FH use case |
|---|---|---|---|---|---|---|
| 001 | Dribbble login — bioluminescent mushrooms | [dribbble.com/session/new](https://dribbble.com/session/new) | @glebich (Gleb Kuznetsov) | `assets/reference/dribbble-login-mushrooms-glebich.mp4` (16.5 MB, local only) | **Recreated** → [pages/001-login-mushrooms](pages/001-login-mushrooms/index.html) | FreshHouse.TV login/auth |
| 002 | Login Screen — AI Travel Planner Web App ("Touri") | [shot 27537339](https://dribbble.com/shots/27537339-Login-Screen-UI-Design-AI-Travel-Planner-Web-App) | unconfirmed | `ai-travel-planner-login.png` + `-2.png` | **Captured** | FreshHouse.TV login alt direction |
| 003 | Astrology App Design | [shot 27537593](https://dribbble.com/shots/27537593-Astrology-App-Design) | unconfirmed | `astrology-app-design.png` + `-2.png` | **Captured** | TBD — mystic-warm mobile direction |
| 004 | Saudi Arabia (isometric 3D map video) | [shot 27538208](https://dribbble.com/shots/27538208-Saudi-Arabia) | unconfirmed | `saudi-arabia-map.mp4` (9 MB, local only) + `saudi-arabia-map-still.jpg` poster | **Captured** | **Fresh House Festival Earth clickable campus map** |
| 005 | ScrollGuard — digital wellness / screen-time tracker | [shot 27537827](https://dribbble.com/shots/27537827-ScrollGuard-Digital-Wellness-Screen-Time-Tracker) | unconfirmed | `005-scrollguard-1.png` | **Captured** | TBD (member wellbeing) |
| 006 | Mouma — crest, color system, mascot, packaging | [shot 27439085](https://dribbble.com/shots/27439085-Mouma-s-Primary-Crest-Color-System-Mascot-and-Full-Packaging) | unconfirmed | `006-mouma-crest-1..4.png` | **Captured** | FH brand-system reference |
| 007 | SENCHA — premium organic tea landing page | [shot 27535831](https://dribbble.com/shots/27535831-SENCHA-Premium-Organic-Tea-Landing-Page) | unconfirmed | `007-sencha-tea-1..2.png` + `007-sencha-tea.mp4` (15 MB, local only) + poster | **Captured** | FH landing-page polish bar |
| 008 | AI Motion — meme video creator mobile app | [shot 27538111](https://dribbble.com/shots/27538111-AI-Motion-Meme-Video-Creator-Mobile-App-UI-UX-Design) | unconfirmed | `008-ai-meme-creator-1.png` | **Captured** | FH creator tools |
| 009 | Bonau — student learning dashboard | [shot 27539452](https://dribbble.com/shots/27539452-Bonau-Student-Learning-Dashboard) | unconfirmed | `009-bonau-dashboard-1..3.png` | **Captured** | FH learning / creator-academy dashboard |
| 010 | World Draw (Awwwards SOTD) | [awwwards](https://www.awwwards.com/sites/world-draw) | unconfirmed | `010-world-draw-1.png` | **Captured** | Festival Earth interactive-world mechanics |
| 011 | ML© — Mohnish Landge portfolio (Awwwards HM) | [awwwards](https://www.awwwards.com/sites/ml-c-portfolio-mohnish-landge) | Mohnish Landge | `011-mlc-portfolio-1.png` | **Captured** | Motion / typography craft |
| 012 | Udio — AI audio experiences | [awwwards](https://www.awwwards.com/inspiration/udio-revolutionizing-audio-experiences-with-ai) | Udio | `012-udio-ai-audio-1.jpg`, `-g3.jpg`, `-g4.png` + `-2.mp4` (1 MB, local only) + poster | **Captured** | FH audio / AI feature language |
| 013 | Mysteries of Gravity Falls (Awwwards HM) | [awwwards](https://www.awwwards.com/sites/mysteries-of-gravity-falls) | unconfirmed | `013-gravity-falls-1.jpg`, `-g3.jpg`, `-g4.jpg` | **Captured** | Narrative world-building craft |
| 014 | Andy Hardy — portfolio (Awwwards HM) | [awwwards](https://www.awwwards.com/sites/andy-hardy-portfolio) | Andy Hardy | `014-andy-hardy-1.jpg`, `-g3.png`, `-g4.png` | **Captured** | Portfolio / imagery craft |
| 015 | YouTube Rewind 2019 site (Awwwards HM) | [awwwards](https://www.awwwards.com/sites/youtube-rewind-2019) | unconfirmed | `015-yt-rewind-2019-1.png` + `-2.mp4` (1.6 MB, local only) + poster | **Captured** | FreshHouse.TV network-site language |
| 016 | GRAVITAS inc. — Tokyo video production studio | [gravitas.tokyo/#case](https://gravitas.tokyo/#case) | GRAVITAS inc. | `016-gravitas-tokyo-1.png` | **Captured** | FreshHouse.TV studio-site vibe |
| 017 | Spexster — For Advertisers | [awwwards](https://www.awwwards.com/inspiration/for-advertisers-spexster) | Spexster | `017-spexster-1.jpg`, `-g3.jpg`, `-g4.jpg` + `-2.mp4` (3 MB, local only) + poster | **Captured** | FH advertiser / partner page |
| 018 | Creator Connect — SaaS community web app | [shot 24447879](https://dribbble.com/shots/24447879-Creator-Connect-SaaS-Community-Web-App) | unconfirmed | `018-creator-connect-1..4.png` | **Captured** | **FH community app — high relevance** |
| 019 | Catchme — monetizing platform for creators | [shot 24575347](https://dribbble.com/shots/24575347-Catchme-Monetizing-Platform-for-Creators) | unconfirmed | `019-catchme-1..4.png` | **Captured** | **FH monetization / Infinity Links tie-in** |
| 020 | Superwhisper — marketing site (scroll-morph hero) | [superwhisper.com](https://superwhisper.com/) | Superwhisper (AI dictation app) | `020-superwhisper-1-hero.png`, `-2-scroll-morph.png`, `-3-feature-section.png` | **Captured** | Scroll-driven hero morph craft — FreshHouse.TV / Quan landing-page polish bar |

> Batch 005–019 captured 2026-07-09 via the Jina reader route (see README). Re-capture any of them
> the same way; local-only mp4s can be re-downloaded from the shot/site pages.
>
> 020 captured 2026-07-13 via `/browse` (gstack headless Chromium) — full JS/CSS bundle inspection
> possible since it's a live site, not a Dribbble shot. See entry notes below for the confirmed tech stack.

## Entry notes

### 001 — Dribbble login / mushroom video
- Split layout: white left panel (script logo top-left, centered 400px column: mark, "Welcome back",
  Google pill, "or", username input, dark pill Continue, terms, sign-up) + ~29%-width full-bleed
  looping video right panel.
- The video: bioluminescent purple/pink mushrooms, night scene, tiny lit village + cyan pool.
- CDN source (re-downloadable): `https://cdn.dribbble.com/uploads/48226/original/b8bd4e4273cceae2889d9d259b04f732.mp4`
- **Production video options:** license from @glebich · AI-generate (draft prompt: "looping 3D render,
  bioluminescent purple and pink mushrooms glowing at night, tiny warm village lights at their base,
  turquoise pond, dark starry sky, cinematic, seamless loop, 9:16") · CSS/WebGL scene.

### 002 — Touri AI travel planner login
- Tablet split login: full-bleed travel photo left, near-black form right. "Welcome Back!" heading,
  email/password fields, sunset-gradient (orange→pink→purple) Log In pill, gradient-outlined
  Google/Apple pills.
- CDN sources: `https://cdn.dribbble.com/userupload/48307355/file/4e7cd8bc687001d02400a27ba15a0fba.png`
  and `.../48307356/file/eb0e9fd0c7180db213bd17d912915f58.png`

### 003 — Astrology app
- Dark charcoal + warm orange mobile UI on cream backdrop: tarot lesson cards, segmented
  Today/Week/Year pills, Love/Friendship/Work progress rings, palmistry hand with constellation
  line art, rounded bottom nav.
- CDN sources: `https://cdn.dribbble.com/userupload/48308082/file/e37311b8eaa76d4f9896db87c2fc8612.png`
  and `.../48308083/file/f268a5144b7fcd9127eb615ea9b69644.png`

### 020 — Superwhisper marketing site

**Aesthetic:** Clean SaaS-minimal, Inter typeface throughout (Next.js `next/font` optimized), heavy
use of soft "sky" gradients as the visual signature — matches the product's voice/dictation theme
("just speak"). Nav is a floating centered pill (Home / Docs / Pricing / Download) with a
light/system/dark theme toggle (sun / monitor / moon icons, top-right). Body background is pure
black (`#000`-ish) outside the hero card; the hero itself is a huge rounded-corner card containing
a blue-to-white vertical gradient sky.

**Confirmed color system (via computed styles, not eyeballed):** the hero uses three named gradient
layers — `.gradient-layer.day`, `.gradient-layer.dusk`, `.gradient-layer.night` — a literal
time-of-day sky system:
- **day:** `linear-gradient(90deg, rgba(25,74,232,.2) 2.75%, rgba(255,190,10,.2) 99.26%)` (blue→amber)
  over a radial `rgba(38,84,144,.5)` → white center glow
- **dusk:** `linear-gradient(90deg, rgba(25,153,232,.15) 2.75%, rgba(164,91,242,.15) 99.26%)`
  (blue→violet) over a dark-navy radial (`rgba(0,5,46,.5)` → `rgba(41,40,94,.5)`)
- **night:** present as a third layer (not fully inspected — same pattern, darker)

**Scroll effect (this is the "steal-worthy" part):** the hero section is `position: sticky` and,
as you scroll past it, cross-fades between multiple headline/subhead states ("Just speak. Write
faster." → "Ready to see how it works?" → "Turn your voice into polished text.") while the card's
inset margin and border-radius increase — it visually shrinks from full-bleed into a framed
"app window" as the page scrolls, before releasing into the normal-flow sections below (social
proof logos, feature grid, "Build it yourself" custom-mode section). This is the classic
"pinned card that morphs into a device frame" pattern also seen on Linear/Arc/Raycast marketing sites.

**Confirmed tech stack (via live bundle inspection, not guessed):**
- **Framework:** Next.js App Router (`_next/static/chunks/app/(home)/page-*.js`), hosted on Vercel
  (Vercel Speed Insights + Analytics scripts present)
- **Styling:** Tailwind CSS (utility class fingerprints in the compiled CSS — `.sticky`, `.-inset-1`, etc.)
- **Scroll animation library:** **Framer Motion** (npm package `motion`) — confirmed by finding
  Motion's own internal dev-warning string verbatim in the bundle: *"You have defined a ... options
  but the provided ref is not yet hydrated ... Try calling useScroll() in the same component as the
  ref"*. This is Motion's `useScroll()` hook, not a hand-rolled scroll listener.
- One narrow exception: a small pill/dropdown scrollbar-fade uses the **native CSS
  `animation-timeline: scroll()`** API (`@supports (animation-timeline:scroll())` guarded) — modern,
  JS-free scroll-linked fade for that one UI detail only, not the hero.
- Analytics/tracking (not relevant to the design, noted for completeness): GTM ×2, Meta Pixel,
  Google Ads conversion, Bing, PostHog, Dub.

**How to replicate the hero morph (Framer Motion — confirmed pattern, see
[awwwards-animations](../../.claude/skills/awwwards-animations/references/motion-patterns.md)
"Element-Based Scroll"):**

```jsx
import { motion, useScroll, useTransform } from 'motion/react'
import { useRef } from 'react'

function ScrollMorphHero() {
  const ref = useRef(null)
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start start', 'end start'], // pin while hero is at top of viewport
  })

  // card insets/rounds as you scroll past it
  const inset = useTransform(scrollYProgress, [0, 1], ['0px', '32px'])
  const radius = useTransform(scrollYProgress, [0, 1], ['0px', '32px'])
  // cross-fade headline -> subhead states
  const headlineOpacity = useTransform(scrollYProgress, [0, 0.35, 0.5], [1, 1, 0])
  const subheadOpacity = useTransform(scrollYProgress, [0.4, 0.55, 0.8, 1], [0, 1, 1, 0])

  return (
    <section ref={ref} className="h-[220vh]"> {/* tall scroll runway */}
      <motion.div
        className="sticky top-0 h-screen overflow-hidden bg-gradient-to-b from-blue-600 to-white"
        style={{ margin: inset, borderRadius: radius }}
      >
        <motion.h1 style={{ opacity: headlineOpacity }}>Just speak. Write faster.</motion.h1>
        <motion.div style={{ opacity: subheadOpacity }}>Ready to see how it works?</motion.div>
      </motion.div>
    </section>
  )
}
```

Key mechanics: a tall (`200vh`+) wrapper section gives scroll runway, the visual card inside is
`sticky top-0` so it pins while the wrapper scrolls past, and `useScroll({ target: ref, offset })`
produces a 0→1 `scrollYProgress` scoped to that section (not the whole page) which every
`useTransform` maps to inset/radius/opacity keyframes. Swap the gradient gods (day/dusk/night) for
a Fresh House "bioluminescent night garden ↔ dawn" palette to tie back into specimen 001's mushroom
theme — same mechanic, different sky.

**FH/Quan use case:** this exact mechanic is a strong candidate for FreshHouse.TV's own homepage
hero (mushroom/night-garden sky cross-fading into "how it works") or a Quan.is landing hero
("just talk to your second brain" → feature reveal). Higher production value than a static hero,
low implementation cost given Motion is already the recommended library in `awwwards-animations`.

### 004 — Saudi Arabia video → Festival Earth campus map
- Sky's idea: a clickable campus map for Fresh House Festival Earth in this style — cinematic
  aerial/3D terrain with interactive hotspots.
- The video: isometric low-poly KSA map with landmark hotspots (Kaaba, Mecca clock tower, Medina
  mosque, Riyadh towers), city signposts, connecting roads, camels/boats/food details.
- CDN source (re-downloadable): `https://cdn.dribbble.com/userupload/48309929/file/48b1bc0298559027a1b0334891065bb7.mp4`