37 lines
1.1 KiB
Svelte
37 lines
1.1 KiB
Svelte
<style lang="scss">
|
|
@import "../../style/atoms/site-title";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import SplitText from '$components/SplitText.svelte'
|
|
import reveal from '$animations/reveal'
|
|
import { DURATION } from '$utils/constants'
|
|
|
|
export let variant = 'lines'
|
|
export let tag = 'h1'
|
|
</script>
|
|
|
|
{#if tag === 'h1'}
|
|
<h1 class="site-title site-title--{variant}"
|
|
use:reveal={{
|
|
children: '.char',
|
|
animation: { y: ['105%', 0] },
|
|
options: {
|
|
stagger: 0.04,
|
|
duration: 1,
|
|
delay: DURATION.PAGE_IN / 1000,
|
|
threshold: 0,
|
|
},
|
|
}}
|
|
>
|
|
<SplitText text="Houses" mode="chars" class="pink mask" />
|
|
<SplitText text="Of The" mode="chars" class="middle mask" />
|
|
<SplitText text="World" mode="chars" class="pink mask" />
|
|
</h1>
|
|
{:else}
|
|
<div class="site-title site-title--{variant}">
|
|
<span class="word-1">Houses</span>
|
|
<span class="middle word-2">Of The</span>
|
|
<span class="word-3">World</span>
|
|
</div>
|
|
{/if} |