Synthesis9

Tags: wave, gradient

Usage

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

Vue

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

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

React

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

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

Svelte

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

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

Props

You can configure OmbreSynthesis9 by passing the following props:

Name	Type	Default	Description
colorA	String	#150e7e	The left color of the first wave
colorB	String	#9f4e83	The right color of the first wave
colorC	String	#c6b873	The left color of the second wave
colorD	String	rgba(69,78,131,0.53)	The right color of the second wave
backgroundColor	String	#0a1029	The background color
frequency	Number	1	The frequency of the waves
speed	Number	1	The speed of the waves
amplitude	Number	0.07	The amplitude of the waves
smoothness	Number	0.2	How soft the edges of the waves are

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.