aida_front/src/views/AwardPage/components/Bloom.vue

<template>
	<div class="bloom container flex flex-col align-center">
		<div
			class="title"
			ref="titleRef"
		>
			Bloom Your Creativity
		</div>

		<div
			class="season"
			ref="subtitleRef"
		>
			Theme of 2026
		</div>
		<div
			class="desc"
			ref="textRef"
		>
			Where imagination meets innovation, creativity blooms. This theme celebrates
			AI as a catalyst for fashion design, allowing your vision to flourish beyond
			traditional boundaries. Let your ideas blossom into extraordinary designs that
			merge human artistry with artificial intelligence.
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
	import { gsap } from 'gsap'

	const titleRef = ref<HTMLElement | null>(null)
	const subtitleRef = ref<HTMLElement | null>(null)
	const textRef = ref<HTMLElement | null>(null)

	const hasPlayedBloomAnim = ref(false)
	let bloomObserver: IntersectionObserver | null = null

	const setupBloomInitialState = () => {
		const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
		if (titleEls.length) {
			gsap.set(titleEls, {
				opacity: 0,
				// start larger than final size, then animate down to scale:1
				scale: 1.6,
				transformOrigin: '50% 50%'
			})
		}

		if (textRef.value) {
			// start below and hidden
			gsap.set(textRef.value, {
				opacity: 0,
				y: 60
			})
		}
	}

	const playBloomAnimation = () => {
		if (hasPlayedBloomAnim.value) return
		const titleEls = [titleRef.value, subtitleRef.value].filter(Boolean) as HTMLElement[]
		const textEl = textRef.value
		if (!titleEls.length || !textEl) return

		const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })

		tl.to(titleEls, {
			opacity: 1,
			scale: 1,
			duration: 0.9,
			ease: 'back.out(1.6)',
			stagger: 0.12
		})

		tl.to(
			textEl,
			{
				opacity: 1,
				y: -12,
				scale: 1.05,
				duration: 0.3,
				ease: 'power2.out'
			},
			'+=0.12'
		)
		tl.to(
			textEl,
			{
				y: 0,
				scale: 1,
				duration: 0.18,
				ease: 'bounce.out'
			},
			'+=0.08'
		)

		hasPlayedBloomAnim.value = true
		bloomObserver?.disconnect()
	}

	onMounted(() => {
		nextTick(() => {
			setupBloomInitialState()
			if ('IntersectionObserver' in window) {
				bloomObserver = new IntersectionObserver(
					(entries) => {
						entries.forEach((entry) => {
							if (entry.isIntersecting) {
								playBloomAnimation()
							}
						})
					},
					{ threshold: 0.3 }
				)
				if (titleRef.value) {
					bloomObserver.observe(titleRef.value)
				}
			} else {
				// fallback
				playBloomAnimation()
			}
		})
	})

	onBeforeUnmount(() => {
		bloomObserver?.disconnect()
	})

</script>

<style scoped lang="less">
	.bloom {
		padding-top: 12.8rem;
		font-family: 'Poppins';
		background: url('@/assets/images/award/bloom_bg.png') no-repeat;
		background-size: 100% 100%;
		.title {
			font-size: 4rem;
			color: #232323;
			margin-bottom: 2.4rem;
		}
		.logo {
			margin-bottom: 2.2rem;
		}
		.season {
			font-size: 3rem;
			color: #c7342c;
			margin-bottom: 6.6rem;
		}
		.desc {
			font-family: 'Arial';
			font-size: 2.8rem;
			color: #585858;
			text-align: center;
			padding: 0 21.5rem;
			line-height: 4.5rem;
			margin-bottom: 12.3rem;
		}
	}
</style>