Attention

A subtle attention nudge that plays a one-shot animation on command. Reach for it to highlight a KPI that just changed or a badge that needs a glance. Four effects are available: pulse, shake, bounce and tada.

3 new

Bind the trigger prop to a reactive value to replay the effect whenever it changes, or call the exposed play() method through a template ref. The finished event fires on animation end. When prefers-reduced-motion is set no animation plays and play() simply emits finished right away.

Props

effect?: "pulse" | "shake" | "bounce" | "tada"
The attention animation to play.
Default: pulse

trigger?: unknown
Any change to this value replays the effect, so bind it to the data you want to draw attention to.

duration?: number
The length of the animation in milliseconds.
Default: 700

Emits

finished: []
Triggered when the effect animation completes. Fires immediately when reduced motion is preferred.

Slots

default
The element that should receive the attention effect. The animation is applied directly to this element, without a wrapper, so it must be transformable (any display other than inline).

Examples

Effects

Pick between the pulse, shake, bounce and tada effects.

Preview

pulse

Code

<template>
    <FluxFlex
        align="center"
        direction="vertical"
        :gap="18">
        <FluxVisualAttention
            ref="attention"
            :effect="effect">
            <FluxBadge
                color="primary"
                :label="effect"/>
        </FluxVisualAttention>

        <FluxFlex
            direction="horizontal"
            :gap="9">
            <FluxSecondaryButton
                v-for="option in effects"
                :key="option"
                :label="option"
                @click="play(option)"/>
        </FluxFlex>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxBadge, FluxFlex, FluxSecondaryButton } from '@flux-ui/components';
    import { FluxVisualAttention } from '@flux-ui/visuals';
    import { ref, useTemplateRef } from 'vue';

    type AttentionEffect = 'pulse' | 'shake' | 'bounce' | 'tada';

    const effects: AttentionEffect[] = ['pulse', 'shake', 'bounce', 'tada'];

    const effect = ref<AttentionEffect>('pulse');
    const attentionRef = useTemplateRef<InstanceType<typeof FluxVisualAttention>>('attention');

    function play(next: AttentionEffect): void {
        effect.value = next;
        attentionRef.value?.play();
    }
</script>

On change

Bind the trigger prop to a value so the effect replays each time it updates.

Preview

128

Code

<template>
    <FluxFlex
        align="center"
        direction="horizontal"
        :gap="15">
        <FluxVisualAttention
            effect="tada"
            :trigger="orders">
            <span style="display: inline-block; font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums;">{{ orders }}</span>
        </FluxVisualAttention>

        <FluxSecondaryButton
            icon-leading="plus"
            label="New order"
            @click="orders++"/>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlex, FluxSecondaryButton } from '@flux-ui/components';
    import { FluxVisualAttention } from '@flux-ui/visuals';
    import { ref } from 'vue';

    const orders = ref(128);
</script>