Communitygithub.com

ZeroSum-Solutions/mishmash

A modern React landing page for a fictional broadcast-grade live video platform featuring a full-screen adaptive HLS video background, a glassmorphic navigation header, and hero content pinned to the bottom-left corner. Dark cinematic aesthetic with Gloock display serif, Archivo body, JetBrains Mono telemetry labels, and an aurora-green signal accent — ideal as a live streaming platform or video SaaS landing page template.

mishmash 是什么？

mishmash is a Claude Code agent skill that a modern React landing page for a fictional broadcast-grade live video platform featuring a full-screen adaptive HLS video background, a glassmorphic navigation header, and hero content pinned to the bottom-left corner. Dark cinematic aesthetic with Gloock display serif, Archivo body, JetBrains Mono telemetry labels, and an aurora-green signal accent — ideal as a live streaming platform or video SaaS landing page template.

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ZeroSum-Solutions/mishmash/tree/HEAD/design-templates/auroracast-hls-landing
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

Auroracast — HLS Video Streaming Landing Page

Landing page vendored from the MIT-licensed pulkitxm/claude-directory gallery.

A modern React landing page for a fictional broadcast-grade live video platform featuring a full-screen adaptive HLS video background, a glassmorphic navigation header, and hero content pinned to the bottom-left corner. Dark cinematic aesthetic with Gloock display serif, Archivo body, JetBrains Mono telemetry labels, and an aurora-green signal accent — ideal as a live streaming platform or video SaaS landing page template.

Workflow

  1. Clone example.html into the user's workspace as the working file.
  2. Replace placeholder content with the user's real brand name, headlines, body copy, numbers, and imagery. Match existing image dimensions when swapping assets.
  3. Preserve the design system. The palette, type scale, spacing rhythm, and motion in the build spec below are the identity — do not substitute fonts, recolour the palette, or strip decorative elements.
  4. Extend by duplicating sections, never by importing a layout from another template. If a section is missing, design it from scratch in this template's own vocabulary.
  5. Keep motion accessible. Every animation must stay behind prefers-reduced-motion, as the build spec requires.

Output contract

Emit between <artifact> tags:

<artifact identifier="auroracast-hls-landing" type="text/html" title="Auroracast — HLS Video Streaming Landing Page">
<!doctype html>
<html>...</html>
</artifact>

Build spec

The upstream prompt that produced this design, verbatim.

Prompt

Create a modern React landing page with a full-screen HLS video background, glassmorphic navigation header, and hero content positioned in the bottom-left corner.

Overview

Build a single landing page in React. The page should feature:

  • A full-screen HLS video background that fills the viewport.
  • A glassmorphic navigation header.
  • Hero content positioned in the bottom-left corner of the page.

Source & license

Vendored from MIT-licensed pulkitxm/claude-directory. The upstream MIT licence text ships in this template at LICENSE and must be redistributed alongside any copy of example.html or assets/.

Webfonts and full-resolution imagery are not vendored: local @font-face rules are served from the Google Fonts CDN and referenced images are downscaled. Fetch the upstream folder for the original assets.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

ZeroSum-Solutions/mishmash

Two-section scroll landing for **S.P.D**, a fictional daily-operations automation platform. Section one is a full-bleed black hero: a muted, looping period-painting video plays edge to edge behind a top-left wordmark and tagline, a top-right pill CTA, and a large right-aligned serif headline low in the frame. A cloud-plume image straddles the seam into section two, a saturated red panel holding a centered monogram, an uppercase mission line, a large script signature, two closing lines of copy, and a second looping video with a soft fade into the red. Motion is a staggered load-in fade on the hero, an IntersectionObserver reveal on the red section's content, and a scroll-linked parallax on the cloud plume — all degrading to a static, fully-visible layout under reduced motion.

ZeroSum-Solutions/mishmash

Full-screen, single-viewport (100vh, no scroll) dark hero landing page for **Asme**, a fictional no-code AI app platform. The fullscreen background is an HLS video stream from Mux, playing natively on Safari and via hls.js MediaSource on other browsers. A liquid-glass pill navbar (luminosity-blended glass with a masked `::before` gradient border) floats above an Instrument Serif hero heading and an animated email-capture CTA — "Get early access" expands to a form with a 60 ms/char typewriter placeholder, flips `ArrowRight` to `Check` on submit, and auto-resets after 4 seconds. All elements animate in on load with Motion (Framer Motion).

ZeroSum-Solutions/mishmash

A pixel-spec, dark-themed single-page marketing landing site for **Asme**, a fictional knowledge and insights platform, featuring a signature reusable `.liquid-glass` surface treatment — luminosity-blended translucent fill, 4px backdrop blur, inset top highlight, and a masked `::before` gradient border — applied consistently across the navbar pill, email capture, buttons, cards, and icon chips. The full-viewport hero loops a locally vendored `.mp4` video via a vanilla `requestAnimationFrame` opacity crossfade (fade in on `canplay`, fade out at 0.55s remaining, 100ms gap restart). Four scroll-triggered sections animate in with Framer Motion `useInView`: About, Featured Video, Innovation × Vision (video + two columns sliding from opposite sides), and Services (two glass cards with hover-zoom video). Instrument Serif display type sits against pure black throughout.

ZeroSum-Solutions/mishmash

A premium, dark-cinematic landing page for **Aura**, a fictional AI-native email client, featuring a looping fullscreen background video, a gradient-clip shiny headline, a macOS-style menu bar mockup, a realistic inbox preview, and a custom liquid-glass card treatment. The multi-section layout covers navbar, hero, menu bar, inbox mockup, feature triage, logo cloud, testimonials, pricing, and a final CTA — targeting the AI productivity app and SaaS landing page use case.

ZeroSum-Solutions/mishmash

A single-screen marketing landing page for "dot.", a calm-messaging product that links you with one anonymous peer for a single message each day. The hero is a full-screen looping background video of a phone, fronted by an animated Instrument Serif headline and a typewriter effect that types and deletes short messages ("Are you here?", "Yes, I am.", "Speak soon.") positioned to sit on the phone's on-screen display — evoking a quiet, analog rhythm. A floating pill navbar with a glinting "Link up" CTA completes the single-screen composition.

ZeroSum-Solutions/mishmash

A single-page "scrollytelling" landing page called Step Into Wonder: a 4.8-screen pinned scroll sequence where painted curtains part over a glowing crystal-cave portal, the world zooms and the portal irises open toward a sky beyond, then a giant arc of nine pastel destination cards sweeps across the closing scroll like a slow ferris wheel. Serif display headlines (Viaoda Libre) pair with a plain sans body face (Imprima) over a near-black stage, with mouse parallax on every layer and a dignified static fallback under reduced motion.

ZeroSum-Solutions/mishmash

Full landing page for the fictional AI workflow-automation platform **FlowMate** — a fixed left sidebar with a logo mark and section nav, a translucent blurred navbar, a large serif hero headline, a liquid-glass chat-composer card overlaid on a looping ambient video, a six-card feature grid, and an auto-rotating three-up cards carousel, all on an off-white minimalist palette with one indigo-violet chromatic accent.

ZeroSum-Solutions/mishmash

A single-page landing page for GroundAI, an interior-design AI product, built with TanStack Start v1 on file-based routing, React 19, TypeScript, Tailwind CSS v4, framer-motion for all animation, and lucide-react for icons. The page is composed of four stacked sections: a full-bleed autoplaying video hero with spring-animated header, expanding glass nav pill, and word-by-word animated description; a CSS marquee of partner brand wordmarks; a CraftExperiences section with a spring-driven style carousel, a skeleton-morphing chat card, and a staggered adaptable list; and a two-column testimonials block with animated word reveals.

ZeroSum-Solutions/mishmash

Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.

ZeroSum-Solutions/mishmash

A single-page, desktop-only dark hero landing for the fictional studio **Kubric™**, built on **TanStack Start v1 + React 19 + Vite 7 + Tailwind v4** with file-based routing. Features a looping background video with a progressive 8-layer `backdrop-filter` blur at the bottom, an animated SVG logo with arc stroke-dashoffset reveals, a glass nav pill, a character-by-character headline reveal, a vertical right-side section nav, and a white "About us" card. Everything animates in on first load once the background video is ready.

ZeroSum-Solutions/mishmash

Warm, editorial single-page landing for **Velar.**, a fictional luxury real-estate brand. A deep-teal typewriter preloader gives way to a sky-backdrop hero ("Live in Irreplaceable") with a cutout building image that rises from below on load, then a scroll-driven centerpiece: as the user scrolls, that same building drifts upward and scales to 1.45x while pinning toward the bottom of a sticky black statement section with count-up stats. A hover-expand five-tile video gallery slides up over the statement section, and a bronze-gradient "Inquire" close finishes the page. Syne (display) pairs with Inter (body) throughout, on a warm off-white ground with one chromatic bronze accent.

ZeroSum-Solutions/mishmash

A full-screen, cinematic hero landing page for a creative agency called Mainframe, featuring a fixed background video that scrubs forward and backward in response to horizontal mouse movement, an AI-assistant-themed blurred intro label, a typewriter-animated headline, and a row of pill-shaped action buttons with a clipboard copy email link. The design pairs HelveticaNowDisplay-Medium headings with HelveticaNowDisplayW01-Rg body text, both vendored locally for offline use. Built with React 19, TypeScript, Vite, and Tailwind CSS v3.

ZeroSum-Solutions/mishmash

A cinematic, single-section landing hero for mėntality, a fictional mental-health resources product. The page pairs a full-bleed background video that gradient-masks into a soft `#edeef5` base with a glassmorphic, fixed navigation bar, built in React 19 + Vite and animated with Motion (formerly Framer Motion). Notable techniques include `backdrop-blur` glassmorphism, a gradient mask that blends the video top into the base color, `clamp()` fluid headline sizing, an animated SVG hamburger that morphs into an X, an inline blinking "eye/pupil" pill in the headline, and an animated `pl`/`en` language toggle. Styling is Tailwind CSS 4 via the `@tailwindcss/vite` plugin (CSS-first `@theme`, no config file), with Inter and Outfit from Google Fonts.

ZeroSum-Solutions/mishmash

A pure-black (#000) monochrome landing page for Mindloop, a newsletter and content platform, where white typography does the talking — Inter for structure and Instrument Serif italics for accent words. The seven-section page flows through a fixed glass navbar, a full-viewport MP4 hero with email capture, an AI-platform awareness section, a scroll-driven word-by-word opacity reveal, a solution feature grid with a 3:1 video panel, an HLS-streamed CTA section via hls.js (with native Safari fallback), and a minimal footer — with Framer Motion entrances and a liquid-glass CSS border effect throughout.

ZeroSum-Solutions/mishmash

Cinematic single-page landing for the fictional neural-AI platform **SynapseX**. A fixed, full-viewport background video scrubs frame-by-frame as the page scrolls and progressively blurs, sitting behind a scramble-in split-corner hero headline, a 3D-tilted cinematic paragraph reveal, and a frosted-glass horizontal metrics carousel. Pure black-and-white scaffolding is punctuated by one neon-green "synaptic" accent that ties the UI to the glowing footage underneath it.

ZeroSum-Solutions/mishmash

A dark, full-bleed landing page for Neuralyn, a fictional analytics-dashboard SaaS, featuring a full-viewport hero with a scroll-linked parallax dashboard composited over a looping background video and a scroll-driven testimonial where each word lights up as you scroll. The aesthetic is pure-black background, white type, a single italic serif accent word, and a liquid-glass tag pill. Built with React 18 + Vite and TypeScript, styled with Tailwind CSS 3 and shadcn/ui-style primitives, animated via Framer Motion (`useScroll`/`useTransform`) for scroll-linked parallax and the word-by-word color reveal, with fonts self-hosted via Fontsource.

ZeroSum-Solutions/mishmash

A monochrome, editorial landing page for a fictional Natural History Museum paleontology collection, featuring a three-section continuous scroll: a full-viewport hero with a delayed background video reveal and an animated geometric "NHM" SVG logotype (per-polygon slide-up reveal), an "Explore Our World" section with scroll-revealed display heading and action pills, and a dark "Ancient Collection" chapter browser with auto-cycling fossil images and a custom SVG `feTurbulence`/`feDisplacementMap` sand-dissolve transition effect. Built with React 19, Vite 6, Tailwind CSS 4 (CSS-first config), and Motion (Framer Motion), in a strictly monochrome black/white/gray palette — no color accents.

ZeroSum-Solutions/mishmash

A single-page NFT landing site with four full-bleed sections (Hero, About, Collection, CTA) on a dark space theme. The page uses looping muted background videos, a CSS liquid-glass UI effect, a fixed grain texture overlay, and a tight color system (deep navy `#010828`, off-white `#EFF4FF`, neon green `#6FFF00`; Anton headings, Condiment cursive accents, system mono body). Showcases a three-card NFT collection grid with rarity scores and video previews.

ZeroSum-Solutions/mishmash

An integration of the `HeroGeometric` component from Kokonut UI — five blurred, gradient-filled shapes drift behind a gradient-clipped headline on a near-black `#030303` canvas, all driven by Framer Motion. The component is dropped into a proper shadcn/ui project structure and wrapped in a landing experience (floating navbar, CTAs, a live props playground, feature grid, install band) that showcases it above the fold. This animated hero section is an ideal starting point for dark-themed SaaS, design tool, or portfolio landing pages.

ZeroSum-Solutions/mishmash

A single-page space-travel landing site for "astra", with two full-height sections — a hero and a capabilities showcase — both layered over looping background videos that crossfade via a custom rAF-driven JavaScript routine (no CSS transitions). The page shares a "liquid glass" design system for all chrome (nav, chips, cards, CTAs); all text is white over full-bleed video with no dark overlay, so contrast comes entirely from the glass chrome.

相关技能

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

finishing-a-development-branch

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work

community

writing-plans

Use when you have a spec or requirements for a multi-step task, before touching code

community