Component Showcase

Live preview of all new landing page primitives: backgrounds, text effects, hero-editorial, and section variants (default, subtle, muted, dark).

Backgrounds

Wrap hero or any section. Hover to see animations.

BgAurora

Hero headline

Subhead text sits on top

BgParticles

Hero headline

Subhead text sits on top

BgGradientMesh

Hero headline

Subhead text sits on top

BgGridPattern

Hero headline

Subhead text sits on top

BgWaves

Hero headline

Subhead text sits on top

BgSilk

Hero headline

Subhead text sits on top

BgDotField

Hero headline

Subhead text sits on top

BgNoiseGrain

Hero headline

Subhead text sits on top

Text Effects

Scroll-triggered animations on inline text.

TextSplit

Words slide up one by one

TextGradient

Build better products faster

TextBlurReveal

Unblur, one char at a time

TextCountUp

0+

users worldwide

TextScramble

Hero Editorial

Left-aligned oversized headline, single CTA, no badge.

Content that moves the reader, not the cursor.

A newsletter platform built for writers who care about typography, rhythm, and the quiet power of white space.

Start writing

Section Variants

Same component, four background treatments: default, subtle, muted, dark.

FeaturesGrid variant="default"

Variant: default

Same component, different background treatment.

Composable flows

Chain actions without glue code.

Branching logic

Handle every edge case inline.

Live observability

See exactly what ran, when, and why.

FeaturesGrid variant="subtle"

Variant: subtle

Same component, different background treatment.

Composable flows

Chain actions without glue code.

Branching logic

Handle every edge case inline.

Live observability

See exactly what ran, when, and why.

FeaturesGrid variant="muted"

Variant: muted

Same component, different background treatment.

Composable flows

Chain actions without glue code.

Branching logic

Handle every edge case inline.

Live observability

See exactly what ran, when, and why.

FeaturesGrid variant="dark"

Variant: dark

Same component, different background treatment.

Composable flows

Chain actions without glue code.

Branching logic

Handle every edge case inline.

Live observability

See exactly what ran, when, and why.

HowItWorksSteps variant="dark"

Dark variant

1

Orient

Pick your target outcome.

2

Stack

Compose primitives into flows.

3

Run

Let it drift through production.

ProblemPain variant="subtle" headerAlign="left"

Sound familiar?

These are the problems we hear every day.

01

Hours lost to copy paste

Swivel-chair work between 6 tabs.

02

Nothing is wired up

Tools that do not talk to each other.

03

Leaking revenue

Slow iteration quietly kills your growth.

StatsCounter variant="dark"

By the numbers

0+

Active users

0%

Uptime

$0M

Processed

0

Countries

FaqAccordion variant="muted"

Frequently asked questions

Composition Example

Aurora background wrapping an editorial hero with a gradient keyword.

Your brand. Your voice. Your moment.

Composable primitives that help every venture look distinct.

All components live under src/components/landing/. Edit and hot-reload.