You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.1 KiB
56 lines
1.1 KiB
<template> |
|
<p |
|
:style="styleVar" |
|
:class=" |
|
cn( |
|
'radiant-animation bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--radiant-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]', |
|
'bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent ', |
|
$props.class, |
|
) |
|
" |
|
> |
|
<slot /> |
|
</p> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { cn } from '@/lib/utils' |
|
import { computed } from 'vue' |
|
|
|
const props = defineProps({ |
|
duration: { |
|
type: Number, |
|
default: 1, |
|
}, |
|
radiantWidth: { |
|
type: Number, |
|
default: 500, |
|
}, |
|
class: String, |
|
}) |
|
|
|
const styleVar = computed(() => { |
|
return { |
|
'--radiant-anim-duration': `${props.duration}s`, |
|
'--radiant-width': `${props.radiantWidth}px`, |
|
} |
|
}) |
|
</script> |
|
|
|
<style scoped> |
|
@keyframes radiant { |
|
0%, |
|
90%, |
|
100% { |
|
background-position: calc(-100% - var(--radiant-width)) 0; |
|
} |
|
30%, |
|
60% { |
|
background-position: calc(100% + var(--radiant-width)) 0; |
|
} |
|
} |
|
|
|
.radiant-animation { |
|
animation: radiant var(--radiant-anim-duration) infinite; |
|
} |
|
</style>
|
|
|