Skip to content

Heroes & Sections

Hero — App Device Frame

Product hero with a CSS-only browser or phone frame wrapping the screenshot.

SubscriptionIncluded with the Velocity Components subscription.
$velocityx add hero-device-frame
Props & docs

Needs a licence key — subscribe here, then velocityx loginonce.

AstroReactTailwind CSSNew

Hero — App Device Frame

Hero — App Device Frame

Live preview of the Hero — App Device Frame component

Velocity App

Built for the browser, feels like native

A CSS-only browser chrome frame — no screenshot asset of a real device baked in.

Try it free View pricing
App preview

And it works great on mobile too

Download the app
App preview

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $1,250 See all packages →

Using the Hero — App Device Frame component

Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.

Read the component docs All 589 components

More Heroes & Sections components

Browse all →

Hero — Split with Image

Copy-left image-right hero with a gradient placeholder fallback when no image is supplied.

Hero — Background Image + Scrim

Full-bleed background image hero with a solid WCAG-AA scrim behind the copy.

Hero — Gradient Mesh Background

Centred hero with a pure-CSS radial gradient mesh backdrop, no shader runtime.

Hero — Email Capture

Centred hero with an inline plain-HTML email capture form wired to any form action.

Hero — Video Background

Full-bleed autoplaying muted video hero with a solid scrim and reduced-motion fallback to the poster frame.

Hero — Floating UI Screenshot

Centred hero with a large product screenshot card floating below the fold with a soft glow.