Skip to main content
New Animated components

Bring the landing page to life

The same Harbour sections you already love, with tasteful motion layered on top — scroll-triggered reveals, animated counters, gradient text and pointer-tracking spotlight cards. Every effect respects reduced-motion.

Start for free See the effects
app.harbour.dev/motion

Live metrics

Overview

Animating

Revenue

$48.2k

Users

12,840

Uptime

99.9%

01 Scroll reveal

Content that arrives as you scroll

The x-reveal directive fades and slides elements into place the first time they enter the viewport. Direction and delay are set per element for easy staggering.

Reveal Up

Staggered 0ms after the one before it.

Reveal Down

Staggered 120ms after the one before it.

Reveal Left

Staggered 240ms after the one before it.

Reveal Scale

Staggered 360ms after the one before it.

02 Count up

Numbers that animate into view

An animated clone of the stat band. Each figure counts up from zero when scrolled into view, preserving currency symbols, separators and percentages.

Components
44
Active users
12,840
Uptime
99.9%
MRR
$48.2k
03 Gradient text

Headlines with a living gradient

A slow brand-gradient sweep clipped to the glyphs. Drops to a solid brand colour under reduced-motion.

Build beautiful products, ship them faster .

04 Spotlight cards

Cards that respond to the cursor

An animated clone of the glow card. Keeps the cursor-following spotlight and adds a gentle 3D tilt and lift on hover. Tilt is pointer-only, so keyboard and touch stay calm.

05 Lifecycle bento

Tiles that come alive on scroll

Animated clones of the lifecycle bento cells. Copy and checklists stagger in, the deploy stack floats, and the preview-environment graph draws its own lines.

From local to live in seconds

No more guessing how many servers you need: autoscale under load, hibernate when idle, and only pay for what you use.
  • Full control via dashboard or CLI
  • Instantly add databases, workers, cache and storage
Explore Cloud
Scaling down

Review pull requests in preview environments

Review every change in a zero-risk, production-like preview environment before it ever hits your main branch.
  • Integrates seamlessly with GitHub Actions
  • Test migrations and heavy changes safely
Explore Preview Environments
laravel-ai.laravel.cloud skills-pr.laravel.cloud
06 Architecture

Infrastructure that assembles itself

An animated clone of the architecture panel. The Network, Compute and Data columns reveal in sequence and the live status indicators pulse.

Network

Edge network

  • DDoS protection Active
  • CDN Enabled
  • Edge caching Enabled

Domains

Custom domainsVerified

beep.today

US East (Ohio)

App cluster

ComputeFlex 512 MiB

Managed queue

Memory256 MiB

Worker cluster

ComputeFlex 512 MiB

Data services

Beep · Postgres

ComputeFlex 1 GiB

Cache beep_main

Storage250 MB

Global storage

DefaultPrivate

07 Capability card

Product UI that animates in

An animated clone of the Managed queues capability card. The title, copy and mockup reveal in sequence, the headline figures count up, and the sparklines draw themselves when the card scrolls into view.

Managed queues

Run fully managed worker queues that automatically scale based on demand — and cost nothing when idle.
Managed queue default EU Central

Job volume Executed 12.8K

Duration Avg 2.5s · Max 8.1s

17 failed jobs

Realtime analytics

Track throughput and latency as it happens. Metrics stream in live and the charts redraw without a page refresh.
Throughput Live

Requests 124.2K

p95 latency 1.2s

All systems nominal

Motion, without the maintenance

Every animation here is a drop-in Blade component or a one-line directive. No new dependencies, and reduced-motion is handled for you.

Start for free Browse components