Louis Studios

Chrome Arcs

Backgrounds

About

Glossy black chrome rings sweep across the dark, each catching a thin-film streak of amber, white and blue that climbs slowly as the stack flows outward.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chrome Arcs to your project and fits it to your theme.

Code

How Chrome Arcs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import { ChromeArcs } from "@/components/ui/chrome-arcs"

export default function ChromeArcsDemo() {
  return <ChromeArcs className="h-screen min-h-[560px] w-full" />
}

More by Louis Studios

View all
  • Melt Mark

    Melt Mark

    15
  • Dot Tiles

    Dot Tiles

    14
  • Lens Clock

    Lens Clock

    4
  • Brick Digits

    Brick Digits

    3
  • Wave Type

    Wave Type

    3
  • Peak Chart

    Peak Chart

    1
  • Effort Slider

    Effort Slider

    1
  • Metaball Loader

    Metaball Loader

    1

More in Backgrounds

View all
  • Tailwind CSS Background Snippet

    Tailwind CSS Background Snippet

    573
  • Background snippets

    Background snippets

    111
  • Elegant Dark Pattern

    Elegant Dark Pattern

    871
  • Light theme Tailwind CSS Background Snippet

    Light theme Tailwind CSS Background Snippet

    239
  • Gradient Backgrounds

    Gradient Backgrounds

    28
  • Gradient Blur Bg

    Gradient Blur Bg

    20
  • Jade Sky

    Jade Sky

    97
  • Background Components

    Background Components

    20