Spotlight

Highlight important content with a lighting effect

npm run add Spotlight

Use the Spotlight component to highlight content such as updates, announcements, or releases with a visual effect. They guide users toward key content with a strong center of attention without overwhelming the layout. They can also improve aesthetics as the component adds depth, atmosphere, and a premium feel to interfaces.

New components v0.8.1

Astro Promotional Card

Introducing two new components: Skeleton and Ribbon!

See examples ->

<Spotlight className="spotlight">
    <PromotionalCard
        ...
        className="promotional-card"
    />
</Spotlight>

<style lang="scss">
    @use 'webcoreui/config' as *;

    .spotlight {
        min-height: 600px;
        height: 600px;
    }

    .promotional-card {
        @include position(absolute, h-center, t20px);
    }
</style>

To use the Spotlight component, simply wrap the elements into the component that you want to highlight. The component will always take the full height of its container.

For demonstration purposes, in the example above, it’s explicitly set to 600px. The element inside the component can be positioned in any way you like. In this example, its positioned absolutely, centered on the horizontal axis and 20px from the top.

Spotlight Size

The size of the spotlight can be changed with various props, including the following:

• blurAmount: Sets the amount of blurring on the spotlight. Defaults to 15px.
• radialMinWidth: Sets the minimum width of the animated radial gradient at the base of the spotlight. Defaults to 40%.
• radialMaxWidth: Sets the maximum width of the animated radial gradient at the base of the spotlight. Defaults to 50%.
• coneMinWidth: Sets the minimum width of the animated cone. Defaults to 60%.
• coneMaxWidth: Sets the maximum width of the animated cone. Defaults to 70%.

The gradients will grow and shrink between the minimum and maximum values.

Increased spotlight size by 20%

New components v0.8.1

Astro Promotional Card

Introducing two new components: Skeleton and Ribbon!

See examples ->

<Spotlight
    radialMinWidth="60%"
    radialMaxWidth="70%"
    coneMinWidth="80%"
    coneMaxWidth="90%"
>
    <PromotionalCard ... />
</Spotlight>

Particles

The flying particles can also be customized through the following three props:

• particleAmount: Sets the amount of particles spawned at a set interval. Defaults to 2.
• particleSize: Sets the base radius of each particle. This base is used to further randomize size. Defaults to 3.
• particleDuration: Sets the time it takes for the animation to finish in seconds. Defaults to 20.

<Spotlight
    particleAmount={10}
    particleSize={1}
    particleDuration={5}
/>

Colors

If you need to change colors to match your brand, you can update hte background and rgbColor props. The rgbColor prop expects a comma-separated list of RGB values in the following format:

<Spotlight
    background="#000"
    rgbColor="100, 155, 255"
/>

Configuration with CSS

If you would like to keep global component configuration in one place, you can also set the above props through the following CSS variables:

/* The following are default values: */
html body {
    --w-spotlight-blur: 15px;
    --w-spotlight-animation-timing: ease-in-out;
    --w-spotlight-radial-min-width: 40%;
    --w-spotlight-radial-max-width: 50%;
    --w-spotlight-cone-min-width: 60%;
    --w-spotlight-cone-max-width: 70%;
    --w-spotlight-background: radial-gradient(circle at center, #000 0%, #111 100%);
    --w-spotlight-color: 255, 255, 255;
}

API

type SpotlightProps = {
    blurAmount?: number
    animationTiming?: string
    radialMinWidth?: string
    radialMaxWidth?: string
    coneMinWidth?: string
    coneMaxWidth?: string
    background?: string
    rgbColor?: string
    particleAmount?: number
    particleSize?: number
    particleDuration?: number
    className?: string
}