Components Aurora
Petal Pro

Aurora

Aurora provides a beautiful animated gradient background effect that can enhance the visual appeal of your application. With customizable colors, opacity, and animation settings, it's perfect for creating eye-catching sections on marketing pages, hero sections, or anywhere you want to add a touch of visual interest.
Basic Aurora

The basic Aurora component creates a subtle animated background gradient. Place your content inside the component to have it display on top of the effect. Make sure to add relative z-10 to your content container to ensure it appears above the background effect.

Default Aurora Effect

heex
Custom Colors

Customize the aurora effect by changing the gradient colors. You can specify a completely different color scheme to match your brand or design.

Pink Aurora Theme

heex
Aurora with Content

Add marketing content, call-to-action buttons, or any other elements inside the Aurora component to create eye-catching sections for your website.

Supercharge Your App

Our platform delivers lightning-fast performance with beautiful UI components ready to use out of the box.

heex
Aurora Card

Combine the Aurora component with cards to create visually appealing feature highlights. This example shows two cards with different color schemes.

Feature
Lightning Fast Development

Build beautiful interfaces in record time with our component library and design system.

Performance
Optimized for Speed

Every component is carefully optimized for maximum performance and minimal bundle size.

heex
Testimonial with Aurora

Create stunning testimonial sections by combining the Aurora component with testimonial content. The inverted effect gives a unique look to the background.

"

The Aurora component transformed our marketing pages. The subtle animation catches visitors' attention and keeps them engaged. It's been a game-changer for our conversion rates.

JD
Jane Doe
CEO, TechCompany
heex
Properties
elixir 
          
  attr :invert, :boolean, default: false, doc: "Whether to invert the aurora colors"
  attr :background_gradient, :string, default: nil, doc: "Gradient to use as background"
  attr :aurora_gradient, :string, default: nil, doc: "Custom aurora gradient"
  attr :animation_duration, :string, default: "60s", doc: "Duration of the animation in seconds"
  attr :opacity, :string, default: "0.5", doc: "Opacity of the aurora effect"
  attr :blur, :string, default: "10px", doc: "Amount of blur applied to the effect"
  attr :mask_position, :string, default: "100% 0", doc: "Position of the radial mask"
  attr :mask_coverage, :string, default: "10%, 70%", doc: "Coverage of the radial mask"
  attr :class, :string, default: ""
  attr :rest, :global

  slot :inner_block