Skip to content
OpenSmartRoute
Skillv1.0.0

vaultshield-hero

A full-viewport hero section for a fictional password-manager app, **VaultShield**, featuring a looping background video, staggered Framer Motion entrance animations, inline Lucide icons baked into th

by ZeroSum-Solutions(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from ZeroSum-Solutions/mishmash (design-templates/vaultshield-hero/SKILL.md). Install upstream with npx skills add ZeroSum-Solutions/mishmash --skill vaultshield-hero. Copyright stays with the author.

VaultShield — Cinematic Password-Manager Hero Section

Hero section vendored from the MIT-licensed pulkitxm/claude-directory gallery.

A full-viewport hero section for a fictional password-manager app, VaultShield, featuring a looping background video, staggered Framer Motion entrance animations, inline Lucide icons baked into the heading, and a responsive mobile slide-in sheet. The dark-and-purple visual identity pairs Helvetica Now Display Bold headlines with Inter body text over a cinematic video backdrop, making it ideal as a landing page hero for security or productivity SaaS products.

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="vaultshield-hero" type="text/html" title="VaultShield — Cinematic Password-Manager Hero Section">
<!doctype html>
<html>...</html>
</artifact>

Build spec

The upstream prompt that produced this design, verbatim.

VaultShield — Cinematic Password-Manager Hero Section

Overview

Build a fullscreen hero section for a password-manager app called VaultShield. The page fills the viewport with a looping background video, overlays a centered navbar with desktop nav links plus a mobile slide-in sheet, and presents an animated hero block (heading with inline icons, subtext, and a CTA button). Everything fades up on load with staggered Framer Motion transitions.

Tech Stack

  • Framework: React with TypeScript
  • Styling: Tailwind CSS plus inline style objects for fine-grained values
  • Animation: Framer Motion
  • Icons: Lucide React — icons used: ArrowRightCircle, Zap, LockKeyhole, Fingerprint, Menu, X
  • Fonts: Helvetica Now Display Bold (headings) and Inter (body, weights 300–900)
  • Notable techniques: fullscreen object-cover background video, AnimatePresence enter/exit transitions, staggered fade-up reveal via Framer Motion variants

Global Setup

Fonts

  • Heading font: Helvetica Now Display Bold, loaded from https://db.onlinewebfonts.com/c/04e6981992c0e2e7642af2074ebe3901?family=Helvetica+Now+Display+Bold (added as a <link> in index.html).

  • Body font: Inter (weights 300–900), imported at the top of the CSS via Google Fonts:

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

CSS variables and base styles (src/index.css)

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --font-heading: 'Helvetica Now Display Bold', sans-serif;
  --font-body: 'Inter', sans-serif;
  --color-text: #192837;
  --color-accent: #7342E2;
  --color-login-bg: #F2F2EE;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
}

Color Palette

Token Hex Usage
--color-text #192837 Primary dark text, logo fill, icons
--color-accent #7342E2 Accent purple (CTA + "Start For Free" buttons)
--color-login-bg #F2F2EE Light "Sign In" button background
(sheet) #CFC8C5 Mobile menu sheet background
(button) #ffffff CTA button text / "Start For Free" text

Background Video

Full-screen background video covering the entire viewport, rendered as the first child of the root container with absolute inset-0 h-full w-full object-cover:

  • Source: https://d8j0ntlcm91z4.cloudfront.net/user_38xzzbokvigwjottwixh07lwa1p/hf_20260518_003132_8b7edcb6-c64d-4a52-a9ca-879942e122ad.mp4

  • Attributes: autoPlay, muted, loop, playsInline.

Layout Structure

Defined in src/App.tsx:

  1. Container: relative w-full min-h-screen overflow-hidden, with inline style fontFamily: 'var(--font-body)' and color: 'var(--color-text)'.
  2. Background video (see above).
  3. Navbar (<Navbar />).
  4. Hero (<Hero />).
import Navbar from './components/Navbar';
import Hero from './components/Hero';

const VIDEO_SRC =
  'https://d8j0ntlcm91z4.cloudfront.net/user_38xzzbokvigwjottwixh07lwa1p/hf_20260518_003132_8b7edcb6-c64d-4a52-a9ca-879942e122ad.mp4';

export default function App() {
  return (
    <div
      className="relative w-full min-h-screen overflow-hidden"
      style={{ fontFamily: 'var(--font-body)', color: 'var(--color-text)' }}
    >
      <video
        className="absolute inset-0 h-full w-full object-cover"
        src={VIDEO_SRC}
        autoPlay
        muted
        loop
        playsInline
      />
      <Navbar />
      <Hero />
    </div>
  );
}
  • Navbar is wrapped in a <header>: relative z-10 mx-auto w-full max-w-[1280px] px-5 py-4 sm:px-8 sm:py-5, with an inner flex items-center justify-between.
  • Hero content uses a <main>: relative z-10 mx-auto w-full max-w-[1280px] px-5 sm:px-8, with an inner block styled paddingTop: 'clamp(40px, 8vw, 72px)' and maxWidth: 560.

Logo (SVG)

Custom 32×32 SVG logo with a geometric angular shape, fill #192837 (src/components/Logo.tsx). Accepts an optional size prop defaulting to 32.

export default function Logo({ size = 32 }: { size?: number }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      fill="none"
      overflow="visible"
      viewBox="0 0 256 256"
    >
      <path
        d="M 64 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 L 128 64 L 128 64.5 L 161 32 L 192 0 L 256 0 L 256 64 L 192 128 L 128 128 L 128 192 L 96 223 L 63.5 256 L 0 256 L 0 192 Z M 256 192 L 224 223 L 191.5 256 L 128 256 L 128 192 L 192 128 L 256 128 Z"
        fill="#192837"
      />
    </svg>
  );
}

Navbar (src/components/Navbar.tsx)

Nav links are defined as const NAV_LINKS = ['Vault', 'Plans', 'Install', 'News', 'Help'];. The component holds a menuOpen boolean state for the mobile sheet.

  • Left: the logo, wrapped in <a href="#" className="flex items-center">.
  • Center (desktop only, hidden items-center gap-8 md:flex): the 5 links from NAV_LINKS — each an <a href="#"> with text-sm font-medium transition-opacity and an opacity hover effect and inline color: '#192837'.
  • Right (desktop only, hidden items-center gap-3 md:flex):
    • "Start For Free" button — rounded-full px-5 py-2.5 text-sm font-semibold text-white transition-opacity with an opacity hover effect, inline background: '#7342E2'.
    • "Sign In" button — rounded-full px-5 py-2.5 text-sm font-semibold transition-opacity with an opacity hover effect, inline background: '#F2F2EE', color: '#192837'.
  • Mobile: a hamburger button (md:hidden) — rounded-full p-2 transition-opacity with an opacity hover effect, onClick sets menuOpen true. Renders the Lucide Menu icon at color="#192837".
  • <MobileMenu open={menuOpen} links={NAV_LINKS} onClose={() => setMenuOpen(false)} /> is rendered at the end of the header.

Mobile Menu Sheet (src/components/MobileMenu.tsx)

A right-side slide-in sheet built with AnimatePresence + Framer Motion.

  • Props: { open: boolean; links: string[]; onClose: () => void }.
  • Easing constant: const EASE = [0.22, 1, 0.36, 1] as const;

Backdrop

  • fixed inset-0 z-40, inline background: 'rgba(25,40,55,0.35)', backdropFilter: 'blur(4px)' (and WebkitBackdropFilter: 'blur(4px)').
  • Animation: initial={{ opacity: 0 }}, animate={{ opacity: 1 }}, exit={{ opacity: 0 }}, transition={{ duration: 0.3 }}.
  • onClick={onClose}.

Sheet

  • <motion.aside>: fixed right-0 top-0 z-50 flex flex-col, inline width: 'min(88vw, 360px)', height: '100dvh', background: '#CFC8C5', boxShadow: '-12px 0 48px rgba(25,40,55,0.18)'.
  • Animation: initial={{ x: '100%' }}, animate={{ x: 0 }}, exit={{ x: '100%' }}, transition={{ duration: 0.45, ease: EASE }}.

Sheet content

  • Header: flex items-center justify-between px-6 py-5 containing the <Logo /> and a close button (rounded-full p-2 transition-opacity with an opacity hover effect, onClick={onClose}) rendering the Lucide X icon at color="#192837".
  • Divider: a div with height: 1, background: 'rgba(25,40,55,0.15)'.
  • Nav links: <nav className="flex flex-1 flex-col gap-1 px-6 pt-6"> mapping links to <motion.a href="#"> items — py-3 text-2xl font-medium transition-opacity with an opacity hover effect, inline color: '#192837'. Staggered entrance: initial={{ opacity: 0, x: 24 }}, animate={{ opacity: 1, x: 0 }}, transition={{ delay: 0.18 + i * 0.07, duration: 0.45, ease: EASE }}.
  • Bottom CTAs: a <motion.div className="flex flex-col gap-3 px-6 pb-8"> entering with initial={{ opacity: 0, y: 16 }}, animate={{ opacity: 1, y: 0 }}, transition={{ delay: 0.18 + links.length * 0.07, duration: 0.45, ease: EASE }}. Contains:
    • "Start For Free" — rounded-full px-5 py-2.5 text-sm font-semibold text-white transition-opacity with an opacity hover effect, inline background: '#7342E2'.
    • "Sign In" — rounded-full px-5 py-2.5 text-sm font-semibold transition-opacity with an opacity hover effect, inline background: '#F2F2EE', color: '#192837'.

Hero (src/components/Hero.tsx)

Fade-up variant

Applied to the heading (custom 0), subtext wrapper (custom 1), and CTA button (custom 2), each with initial="hidden" / animate="visible":

const EASE = [0.22, 1, 0.36, 1] as const;

const fadeUp: Variants = {
  hidden: { opacity: 0, y: 28 },
  visible: (i: number) => ({
    opacity: 1,
    y: 0,
    transition: { delay: i * 0.15, duration: 0.6, ease: EASE },
  }),
};

This yields delays of 0 (heading), 0.15s (subtext), and 0.30s (CTA).

Inline icon style

const inlineIconStyle: CSSProperties = {
  display: 'inline',
  verticalAlign: 'middle',
  position: 'relative',
  top: -2,
};

Hero heading (<motion.h1>)

  • Inline style: fontFamily: 'var(--font-heading)', fontSize: 'clamp(1.65rem, 5vw, 3rem)', lineHeight: 1.05, letterSpacing: '-0.01em', color: '#192837', marginBottom: 24.
  • Text: "Lock Down Your Passwords with Ironclad Security" with inline Lucide icons (each size={24}, color="#192837", style={inlineIconStyle}):
    • Zap icon before "Lock Down".
    • LockKeyhole icon between "Passwords" and "with".
    • Fingerprint icon after "Security".

Hero subtext

Wrapped in a <motion.div> (custom 1) so the fade runs on the wrapper and the paragraph keeps its 0.8 resting opacity. The inner <p> is styled:

  • fontFamily: 'var(--font-body)', fontSize: 'clamp(0.9rem, 2.5vw, 1.1rem)', lineHeight: 1.65, opacity: 0.8, maxWidth: 560.
  • Text: "Zero stress, total control. VaultShield keeps you covered with unbreakable storage, one-tap access, and pro-grade tools for your non-stop world."

CTA button (<motion.button type="button">)

  • Class: mt-8 inline-flex items-center justify-between font-semibold.
  • Inline style: background: '#7342E2', color: '#ffffff', borderRadius: 50, padding: '17px 24px', fontFamily: 'var(--font-body)', fontSize: 'clamp(0.9rem, 2vw, 1rem)', boxShadow: '0 4px 24px rgba(115,66,226,0.28)', minWidth: 210, gap: 32.
  • Interactions: whileHover={{ scale: 1.04, filter: 'brightness(1.1)' }}, whileTap={{ scale: 0.96 }}.
  • Text: "Get It Free" followed by the Lucide ArrowRightCircle icon (size={20}) on the right.

File Structure

vaultshield-hero/
├── index.html
├── package.json
└── src/
    ├── App.tsx
    ├── main.tsx
    ├── index.css
    └── components/
        ├── Hero.tsx
        ├── Logo.tsx
        ├── MobileMenu.tsx
        └── Navbar.tsx

Dependencies

  • react, react-dom
  • framer-motion
  • lucide-react — icons: ArrowRightCircle, Zap, LockKeyhole, Fingerprint, Menu, X
  • Tailwind CSS

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.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/zerosum-solutions-mishmash-vaultshield-hero/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

zerosum-solutions-mishmash-vaultshield-hero.ocm.jsonjson
{
  "ocm": "1",
  "id": "zerosum-solutions-mishmash-vaultshield-hero",
  "kind": "skill",
  "name": "vaultshield-hero",
  "description": "A full-viewport hero section for a fictional password-manager app, **VaultShield**, featuring a looping background video, staggered Framer Motion entrance animations, inline Lucide icons baked into the heading, and a responsive mobile slide-in sheet. The dark-and-purple visual identity pairs Helvetica Now Display Bold headlines with Inter body text over a cinematic video backdrop, making it ideal as a landing page hero for security or productivity SaaS products.",
  "publisher": "ZeroSum-Solutions",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "marketing"
    ],
    "tags": [
      "skill-md",
      "hero-section",
      "hero-sections",
      "claude-directory",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "A full-viewport hero section for a fictional password-manager app, **VaultShield**, featuring a looping background video, staggered Framer Motion entrance animations, inline Lucide icons baked into the heading, and a responsive mobile slide-in sheet. The dark-and-purple visual identity pairs Helvetica Now Display Bold headlines with Inter body text over a cinematic video backdrop, making it ideal as a landing page hero for security or productivity SaaS products."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/ZeroSum-Solutions/mishmash",
      "path": "design-templates/vaultshield-hero/SKILL.md",
      "ref": "c5152aa6672bb6a062b84bd861b7dfb42d82bdec",
      "url": "https://github.com/ZeroSum-Solutions/mishmash/blob/c5152aa6672bb6a062b84bd861b7dfb42d82bdec/design-templates/vaultshield-hero/SKILL.md",
      "key": "ZeroSum-Solutions/mishmash/design-templates/vaultshield-hero/SKILL.md"
    }
  },
  "instructions": "# VaultShield — Cinematic Password-Manager Hero Section\n\n> Hero section vendored from the MIT-licensed `pulkitxm/claude-directory` gallery.\n\nA full-viewport hero section for a fictional password-manager app, **VaultShield**, featuring a looping background video, staggered Framer Motion entrance animations, inline Lucide icons baked into the heading, and a responsive mobile slide-in sheet. The dark-and-purple visual identity pairs Helvetica Now Display Bold headlines with Inter body text over a cinematic video backdrop, making it ideal as a landing page hero for security or productivity SaaS pr",
  "cost": {
    "context_tokens": 3296
  }
}

Fetch it by URL: GET /api/v1/registry/zerosum-solutions-mishmash-vaultshield-hero/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.