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 }}>