Components Aurora

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included
Petal Pro

Aurora

A soft, drifting aurora glow behind your content - the hero-section backdrop. It's pure CSS (blurred repeating gradients over a stripe texture), the wrapper sizes to whatever you put inside it, and the PetalAurora hook pauses the drift while the section is off-screen. prefers-reduced-motion freezes the motion but keeps the glow.
Basic Aurora

Drop your content inside and pad it - the wrapper grows to fit. No colors means the default palette, which auto-inverts on light backgrounds and renders natural in dark.

Ship your Phoenix app this weekend

Auth, billing, orgs and a component library that looks like you hired a designer.

heex
Custom Colors

Pass any palette as colors (three to six CSS colors) and the gradient is built for you, in order. Here's the same component with three different sets.

sunset
emerald
violet
heex
Aurora with Content

A full call-to-action section. Slow the drift with speed and put your buttons straight inside - there's no z-index dance to get right.

Start selling today

Everything wired up out of the box, so you can spend the weekend on the part that's yours.

heex
Aurora Card

Set it behind cards for feature highlights. A lower opacity keeps the glow subtle so the copy stays readable.

Feature
Fast development

Build interfaces in record time with a component library and design system that agree.

Performance
Built for speed

Every component is server-rendered and ships almost no JavaScript by default.

heex
Testimonial with Aurora

Flood more of the container by pushing the mask out, and you've got a testimonial section that pulls the eye without shouting.

"The aurora took our landing page from fine to the thing people mention on calls. Two attributes and it was done."

Jordan Lee
Founder, Northwind
heex
Properties
elixir 
          
  attr :id, :string, doc: "defaults to a generated id (needed by the pause-offscreen hook)"
  attr :colors, :list, default: ["#3b82f6", "#a5b4fc", "#93c5fd", "#ddd6fe", "#60a5fa"], doc: "3-6 CSS colors; the gradient is built from them in order"
  attr :invert, :string, default: "auto", values: ["auto", "none", "always"], doc: "auto inverts on light and not in dark; none/always force one look"
  attr :speed, :string, default: "60s", doc: "duration of one drift cycle"
  attr :opacity, :string, default: "0.5", doc: "strength of the glow"
  attr :blur, :string, default: "10px", doc: "softness of the glow"
  attr :mask_position, :string, doc: "position of the radial mask"
  attr :mask_coverage, :string, doc: "coverage stops of the radial mask"
  attr :class, :any, default: nil
  attr :rest, :global

  slot :inner_block