Skip to content
VibeFather
Join
↗

About this template

Short Video Feed App is an original, fully client-side motion-story experience for creators, studios and publishers who want a more focused way to present short visual work. Instead of real video files or a media backend, six locally hosted photographs become cinematic scenes with slow pans, timed captions and optional browser-generated sound. The result is quick to ship as a static site while still feeling alive and immersive.

The interface centers on a portrait feed with deliberate one-story navigation by swipe, wheel or arrow key. A compact action rail supports likes, comments, saves and sharing; counts and added comments persist locally. A slide-in conversation drawer, spinning sound control and animated feedback make the prototype feel complete without pretending to connect to a live service. The following view and creator profile reuse the same content model, and the profile grid returns visitors to any selected story.

Warm charcoal, parchment type and a saffron accent give the app an identity distinct from familiar social platforms. Manrope keeps controls crisp, while Instrument Serif adds an editorial note to story captions. Desktop presents a framed portrait stage with generous dark surroundings; mobile turns the same stage into a full-bleed, thumb-friendly feed.

Change the brand, editorial theme, audience and accent to adapt it for a maker journal, travel collective, food publication or creative community. All copy and sample data live in one content file. The template is especially useful for portfolio experiments, editorial concepts and interactive product prototypes where motion, keyboard accessibility, reduced-motion behavior and responsive composition matter more than backend integration.

The template prompt

The live demo was built from exactly this text — nothing added.

# Short Video Feed App

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], an original short-form motion-story web app for [AUDIENCE], organized around the editorial theme [FEED_THEME]. Six portrait photographs become video-like scenes through slow pans, timed captions and optional generative sound. Include a snapping feed, local social actions, a comment drawer, a following view and a creator profile with a media grid; do not use real video files or any backend.

- Audience: [AUDIENCE]. The experience should feel immediately usable by casual mobile viewers and sufficiently polished for designers evaluating an interactive product concept.
- Goal: Let visitors consume exactly one visual story at a time using touch, wheel or keyboard, then like, comment, save, share, follow and revisit stories through persistent browser-only state. Every visible control must have a real local behavior.
- Tone: Warm, observant, cinematic and quietly playful. Use concise editorial language rather than social-media clichés, growth claims or exaggerated urgency.

## Stack
- Framework: Vite 6 + React 19 + TypeScript
- Styling: Tailwind CSS 4
- Libraries: motion (MIT), lucide-react (ISC), @fontsource-variable/manrope (OFL-1.1), @fontsource/instrument-serif (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set Vite base to './' and build.sourcemap to false; emit only static files into dist/ with index.html as the sole HTML entry.
  - Configure Tailwind CSS 4 through @tailwindcss/vite; define the color tokens, font families, feed keyframes and reusable utilities in src/index.css.
  - Import Manrope and Instrument Serif from the listed Fontsource packages so all font files ship locally.
  - Create src/content.ts as the single source for variables, navigation, six stories, seed comments, creator profile, image paths and every UI label; derive the profile handle by lowercasing BRAND and removing spaces and punctuation.
  - Implement #/, #/following and #/profile with a small hash router; also accept ./index.html?story=<story-id> and open the matching story, defaulting to the first story when the parameter is absent or invalid.
  - Use React hooks for active-story, navigation, drawer, toast, follow and tab state; persist likes, saves, follows and added comments in localStorage under one versioned key derived from BRAND, with safe JSON parsing and graceful fallback.
  - Use Motion only for interface transitions and CSS keyframes only for scene pans and the sound disc; keep the active story and animation state synchronized.
  - Create quiet ambient sound with the Web Audio API after an explicit sound-button press, using a different two-note oscillator pattern per story; suspend the AudioContext when sound is off or the document is hidden.
  - Implement sharing with navigator.clipboard and a textarea-based fallback, then show a local confirmation toast; never send content to a server.

## Variables
- [BRAND] — Invented publication or app brand (default: "Hearthline"). Use it in the wordmark, profile name, document title and derived handle.
- [FEED_THEME] — Editorial theme of the story collection (default: "Small rituals, beautifully observed"). Rewrite captions, bios and empty states to fit this theme while preserving their length and structure.
- [AUDIENCE] — Primary audience (default: "curious people who collect craft, food and slow-travel stories"). Keep the voice specific to this audience without adding marketing claims.
- [ACCENT] — Primary interface accent as a hex color (default: "#E9B44C"). Apply to active states, progress, focused controls and the Follow button; retain accessible contrast.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/short-video-feed-app in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

Pro template. The design, sections, motion and assets parts of this prompt are for Pro members. The live demo and DESIGN.md stay free.

Join Pro early access →

DESIGN.md

The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.

---
name: "Short Video Feed App"
colors:
  canvas: "#0C0B0F"
  raised: "#17151B"
  ink: "#F7F3EB"
  muted: "#AAA3AF"
  saffron: "#E9B44C"
  hairline: "#343039"
typography:
  interface_metadata_and_action_labels: { family: "Manrope Variable", weights: [400, 500, 600, 700, 800] }
  story_captions_and_profile_editorial_statement: { family: "Instrument Serif", weights: [400] }
spacing: "Use a 4px base unit. Desktop header is 72px with 32px horizontal padding; desktop story stage has 24px vertical breathing room. Caption blocks use 16px internal gaps, action buttons are 52px with 12px gaps, and drawer rows use 20px. Mobile header is 56px, bottom navigation is 64px plus safe-area inset, captions sit 16px from the left and actions 12px from the right."
radius: "Desktop portrait stage 28px; desktop drawer 24px 0 0 24px; mobile drawer 28px 28px 0 0; inputs and small thumbnail cards 12px; action buttons, tabs, pills and sound disc fully round. Mobile feed stage has no radius."
---

# Short Video Feed App — Design System

Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.

## Colors
- **Canvas** `#0C0B0F` — App background, mobile edge-to-edge surround and deep image scrims.
- **Raised** `#17151B` — Header, drawer, input and desktop control surfaces.
- **Ink** `#F7F3EB` — Primary captions, counts, navigation and high-contrast icons.
- **Muted** `#AAA3AF` — Metadata, inactive navigation, timestamps and secondary actions.
- **Saffron** `#E9B44C` — Default value of [ACCENT]; replace everywhere when the variable changes.
- **Hairline** `#343039` — One-pixel borders, tab rules and progress-track divisions.

## Typography
- **Interface, metadata and action labels** — Manrope Variable (OFL), weights 400/500/600/700/800. Self-host the font files.
- **Story captions and profile editorial statement** — Instrument Serif (OFL), weights 400. Self-host the font files.

## Spacing & shape
- Spacing: Use a 4px base unit. Desktop header is 72px with 32px horizontal padding; desktop story stage has 24px vertical breathing room. Caption blocks use 16px internal gaps, action buttons are 52px with 12px gaps, and drawer rows use 20px. Mobile header is 56px, bottom navigation is 64px plus safe-area inset, captions sit 16px from the left and actions 12px from the right.
- Radius: Desktop portrait stage 28px; desktop drawer 24px 0 0 24px; mobile drawer 28px 28px 0 0; inputs and small thumbnail cards 12px; action buttons, tabs, pills and sound disc fully round. Mobile feed stage has no radius.

## Motion
- Advance or reverse exactly one story per completed wheel or swipe gesture. Use a 24px wheel threshold, 48px touch threshold and 720ms input lock; ArrowDown and ArrowUp mirror navigation, while Home and End jump to the boundaries. Prevent the page behind the feed from scrolling.
- Move between stories with a 520ms cubic-bezier(0.22,1,0.36,1) transform and opacity transition; retain native vertical scroll-snap with scroll-snap-stop: always as the touch fallback.
- Animate only the active photograph for 14s per loop, alternating between scale 1.04 translate3d(-1%,0,0) and scale 1.12 translate3d(1.5%,-1.5%,0). Pause inactive cards and when the document is hidden.
- Reveal the active kicker, caption and creator row with 320ms upward fades staggered by 60ms. Animate count changes with a 180ms vertical roll and the like button with a single 220ms scale pulse.
- Open the comment drawer over 360ms with the same ease and fade its scrim over 200ms. Toasts enter for 220ms, remain for 1800ms and exit without covering the action rail.
- Rotate the sound disc once every 8s only while sound is enabled. Never autoplay sound, and avoid continuous motion elsewhere.
- Under prefers-reduced-motion, remove pans, rotation, smooth scrolling, staggering and count pulses; use immediate state changes and a simple 100ms opacity change for the drawer.

## Imagery
Use the six supplied vertical cinematic photographs as full-bleed story artwork, all with warm amber highlights, deep charcoal shadows, muted sage accents and fine 35mm grain. Apply a bottom-to-top #08070B scrim for readable captions and a subtle blurred duplicate behind the desktop portrait stage. Crop with object-fit: cover and preserve each image's stated focal point. People may appear only as the supplied fictional, unidentifiable figures, hands or distant silhouettes; never add real creator likenesses, logos, lettering or watermarks.

## Tone
Warm, observant, cinematic and quietly playful. Use concise editorial language rather than social-media clichés, growth claims or exaggerated urgency.

---
— Prompt by VibeFather · https://vibefather.ai/t/short-video-feed-app · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown