Animated colors

The animated colors component presents an array of colors with a blurred animation effect, often used in the Pane Illustration component.

Props

colors: string[]
The colors of the animation.

incrementor?: number
Specifies how fast the animation goes.
Default: 1

opacity?: number
The opacity of the animation.
Default: 0.5

seed?: number
A seed to use for the randomizer of the animation.

Examples

Free

When used freely, the animated colors fill the parent container.

Preview

Code

<template>
    <FluxAspectRatio :aspect-ratio="21 / 9">
        <FluxAnimatedColors
            :colors="['#2d5cf2', '#3ea34b']"
            :incrementor=".5"
            :opacity="1"
            :seed="130496"/>
    </FluxAspectRatio>
</template>

<script
    lang="ts"
    setup>
    import { FluxAnimatedColors, FluxAspectRatio } from '@flux-ui/flux';
</script>

Pane

The animated colors visual can be used to make pane's more alive.

Preview

Manage even more

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assumenda beatae commodi culpa fugit laboriosam nihil quasi quibusdam veniam! Cumque et fuga iste maxime officiis quas ratione repudiandae suscipit!

New

Code

<template>
    <FluxPane
        tag="New"
        style="max-width: 360px; contain: paint">
        <FluxAspectRatio :aspect-ratio="21 / 9">
            <FluxAnimatedColors
                :colors="['#d37709', '#d32475', '#6615de']"
                :incrementor=".5"
                :opacity="1"
                :seed="130496"/>
        </FluxAspectRatio>

        <FluxPaneHeader title="Manage even more"/>

        <FluxPaneBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assumenda beatae commodi culpa fugit laboriosam nihil quasi quibusdam veniam! Cumque et fuga iste maxime officiis quas ratione repudiandae suscipit!
        </FluxPaneBody>

        <FluxPaneBody>
            <FluxSecondaryButton
                icon-leading="gear"
                label="Manage"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxAnimatedColors, FluxAspectRatio, FluxPane, FluxPaneBody, FluxPaneHeader, FluxSecondaryButton } from '@flux-ui/flux';
</script>