Spiral9

Tags: two-tone, spiral

Usage

Before you begin, make sure that you've installed Ombré in your project. Then use the <OmbreSpiral9 /> component like so:

Vue

<script setup>
  import { OmbreSpiral9 } from '@ombre-ui/vue'
</script>

<template>
  <div class="relative h-screen w-screen">
    <OmbreSpiral9 />
  </div>
</template>

React

import { OmbreSpiral9 } from '@ombre-ui/react'

function MyComponent() {
    return (
        <div className="relative h-screen w-screen">
            <OmbreSpiral9 />
        </div>
    )
}

Svelte

<script>
  import { OmbreSpiral9 } from '@ombre-ui/svelte'
</script>

<div class="relative h-screen w-screen">
    <OmbreSpiral9 />
</div>

Props

You can configure OmbreSpiral9 by passing the following props:

Name	Type	Default	Description
colorA	String	#fbcec4	The first color of the spiral
colorB	String	#ef729a	The second color of the spiral
speed	Number	1.0	The speed of the spiral
intensity	Number	1.0	The intensity of bands in the spiral
clockwise	Boolean	false	Whether the spiral should spin clockwise or not

Deploying to Production

You must have a valid Ombré license before you deploy to production. You can purchase a lifetime license for unlimited personal & commercial projects for only $36.