Skip to main content

General

Gradient Text code

Copy the implementation or inspect every file that belongs to this component unit.

resources/views/components/ui/gradient-text.blade.php

@props([
    'as' => 'span',
])

@php
    /*
    | Animated gradient text. Renders its slot with a slow brand-gradient sweep
    | clipped to the glyphs. Falls back to a solid brand colour under
    | `prefers-reduced-motion`.
    |
    | as: the HTML tag to render (span, h1, h2, …). Defaults to span.
    |
    | Usage:
    |   <x-ui.gradient-text as="h2" class="text-4xl font-semibold">
    |       Ship beautiful products
    |   </x-ui.gradient-text>
    */
    $allowed = ['span', 'h1', 'h2', 'h3', 'p', 'strong'];
    $tag = in_array($as, $allowed, true) ? $as : 'span';
@endphp

<{{ $tag }} {{ $attributes->merge(['class' => 'animate-gradient-text inline-block']) }}>
    {{ $slot }}
</{{ $tag }}>