Skip to content
Get Pro
Sections

Hero

An opening section: a meta line, a big headline, a subline and two actions, centred or set left over a live background slot.

$149 once · every Pro piece

Customize

On mount the words rise out of a soft blur one after another, and the actions follow. The copy lets the pointer through to the background, so Convection or Hotplate behind it still answers to the hand.

Install

npx shadcn@latest add @obsyde/hero

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Hero } from '@/components/obsyde/ember/hero/Hero';

export function Example() {
  return (
    <Hero />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/hero/Hero.tsxcomponent
  • ember/hero/hero-demo.cssstyles
  • ember/hero/hero.cssstyles
  • ember/hero/HeroDemo.tsxdemo
  • ember/effects-kit/kit.tsshared
  • ember/shared/accent.tsshared
  • ember/hotplate/hotplate.cssshared
  • ember/hotplate/Hotplate.tsxshared
  • ember/shared/ember.cssshared
  • ember/shared/spring.tsshared
  • ember/convection/convection.cssshared
  • ember/convection/Convection.tsxshared
  • ember/filament-text/filament-text.cssshared
  • ember/filament-text/FilamentText.tsxshared
  • ember/blocks-kit/blocks-kit.cssshared
  • ember/blocks-kit/kit.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
backgroundBackground'convection' | 'hotplate' | 'none''convection'
headlineHeadline'filament' | 'plain''filament'
alignAlign'center' | 'start''center'
metaMeta linebooleantrue