FreeMinimal Motion Hero UI Block
A reusable hero section for software launches and product sites, styled with a saturated teal ground, warm editorial typography, and restrained, accessible motion.
Drifting Marks Hero UI Block
A reusable hero section with editorial monospace headlines, a warm-neutral canvas, clear teal actions, and restrained drifting marks. Built for product launches and software brands that need a polished, editable focal section rather than a full landing page.
What you get
- Responsive hero section with editable content and action links
- Warm-neutral visual system with accessible contrast
- Subtle drifting mark treatment with reduced-motion support
- Framework-consistent component and styling
Good fit
- Launching a software product with a concise, outcome-led message
- Refreshing a startup landing page while keeping the section easy to adapt
Not for
- Building a full page with navigation and supporting sections
- A hero that depends on complex product screenshots or custom illustration
What you provide
- Product name and intended audience
- Core promise and primary CTA destination
Requirements
- A modern browser
- Node.js 20+ for the validator
Running cost
No external services. Runs entirely on your agent.
Try this prompt
/sl-drifting-marks-hero-ui-block Build a hero for Fieldnote, a workflow product helping small operations teams turn daily handoffs into clear next steps. Its split section carries the eyebrow “FIELDNOTE · DAILY HANDOFFS,” the headline “Turn every handoff into a clear next step.”, supporting copy, a “Start a workspace” call to action, and a “See the product tour” link. Use warm white, deep teal, editorial monospace type, and subtle drifting line marks.
Follow-up prompts
- Make the headline more specific to independent studio owners while keeping the same layout.
- Adapt the hero to an existing component library and expose all copy and links as props.
Verification
Verified
| render-check | pass | 4.0 / 5 | 63s |
FAQ
Will this create a complete landing page?
No. It creates one hero section, ready to place into an existing page and adapt to its design system.
Can I remove or restyle the drifting marks?
Yes. Keep them as editable decorative elements, restyle their color and placement, or omit them while preserving the layout.
Similar skills
Free
$4.99Strip Hero UI Block
A reusable launch hero with concise messaging, a cinematic photographic strip, and restrained teal accents. Designed for product introductions that need a memorable visual anchor while staying responsive, accessible, and easy to edit.
$4.99Particle Field Hero UI Block
A reusable launch hero that pairs warm clay and cream surfaces with a restrained, kinetic teal particle field. Made for product teams that want an atmospheric first screen without sacrificing readable messaging, responsive behavior, or accessible motion.
$4.99Single Frame Hero UI Block
A reusable, single-section product hero with warm paper surfaces, quiet framing, and a restrained teal call to action. Designed for founders and product teams who need an editorial, polished first screen without building a full landing page.
$4.99Skyline Hero UI Block
A responsive, reusable product-launch hero that pairs a direct message and clear calls to action with an architectural skyline photograph in a warm-neutral, teal-accented style.
$4.99Angled Gallery Hero UI Block
A reusable product-launch hero that balances concise messaging with an art-directed, angled photo gallery. Designed for warm-neutral brands that want kinetic imagery, crisp contrast, and responsive behavior without a full-page template.
$4.99Contact Bar Hero UI Block
A focused, responsive hero that makes a product team's email and phone contact options clear and immediately usable. Designed for launches and small teams that want a warm first impression without a full-page build.
$4.99Dark Stat Hero UI Block
A polished, reusable stats-led hero for product launches and software landing pages, pairing a clear outcome headline with a standout metric and restrained supporting data.