|
| 1 | +<script setup lang="ts"> |
| 2 | +interface Star { |
| 3 | + x: number |
| 4 | + y: number |
| 5 | + size: number |
| 6 | +} |
| 7 | +
|
| 8 | +const props = withDefaults(defineProps<{ |
| 9 | + starCount?: number |
| 10 | + color?: string |
| 11 | + speed?: 'slow' | 'normal' | 'fast' |
| 12 | + size?: { min: number, max: number } |
| 13 | +}>(), { |
| 14 | + starCount: 300, |
| 15 | + color: 'var(--ui-primary)', |
| 16 | + speed: 'normal', |
| 17 | + size: () => ({ |
| 18 | + min: 1, |
| 19 | + max: 2 |
| 20 | + }) |
| 21 | +}) |
| 22 | +
|
| 23 | +// Generate random star positions and sizes |
| 24 | +const generateStars = (count: number): Star[] => { |
| 25 | + return Array.from({ length: count }, () => ({ |
| 26 | + x: Math.floor(Math.random() * 2000), |
| 27 | + y: Math.floor(Math.random() * 2000), |
| 28 | + size: typeof props.size === 'number' |
| 29 | + ? props.size |
| 30 | + : Math.random() * (props.size.max - props.size.min) + props.size.min |
| 31 | + })) |
| 32 | +} |
| 33 | +
|
| 34 | +// Define speed configurations once |
| 35 | +const speedMap = { |
| 36 | + slow: { duration: 200, opacity: 0.5, ratio: 0.3 }, |
| 37 | + normal: { duration: 150, opacity: 0.75, ratio: 0.3 }, |
| 38 | + fast: { duration: 100, opacity: 1, ratio: 0.4 } |
| 39 | +} |
| 40 | +
|
| 41 | +// Use a more efficient approach to generate and store stars |
| 42 | +const stars = useState<{ slow: Star[], normal: Star[], fast: Star[] }>('stars', () => { |
| 43 | + return { |
| 44 | + slow: generateStars(Math.floor(props.starCount * speedMap.slow.ratio)), |
| 45 | + normal: generateStars(Math.floor(props.starCount * speedMap.normal.ratio)), |
| 46 | + fast: generateStars(Math.floor(props.starCount * speedMap.fast.ratio)) |
| 47 | + } |
| 48 | +}) |
| 49 | +
|
| 50 | +// Compute star layers with different speeds and opacities |
| 51 | +const starLayers = computed(() => [ |
| 52 | + { stars: stars.value.fast, ...speedMap.fast }, |
| 53 | + { stars: stars.value.normal, ...speedMap.normal }, |
| 54 | + { stars: stars.value.slow, ...speedMap.slow } |
| 55 | +]) |
| 56 | +</script> |
| 57 | + |
| 58 | +<template> |
| 59 | + <div class="absolute pointer-events-none z-[-1] inset-y-0 inset-x-5 sm:inset-x-7 lg:inset-x-9 overflow-hidden"> |
| 60 | + <svg |
| 61 | + class="absolute inset-0 pointer-events-none" |
| 62 | + viewBox="0 0 1017 181" |
| 63 | + fill="none" |
| 64 | + xmlns="http://www.w3.org/2000/svg" |
| 65 | + > |
| 66 | + <g opacity="0.5"> |
| 67 | + <mask |
| 68 | + id="path-1-inside-1_846_160841" |
| 69 | + fill="white" |
| 70 | + > |
| 71 | + <path d="M0 0H1017V181H0V0Z" /> |
| 72 | + </mask> |
| 73 | + <path |
| 74 | + d="M0 0H1017V181H0V0Z" |
| 75 | + fill="url(#paint0_radial_846_160841)" |
| 76 | + fill-opacity="0.22" |
| 77 | + /> |
| 78 | + </g> |
| 79 | + <defs> |
| 80 | + <radialGradient |
| 81 | + id="paint0_radial_846_160841" |
| 82 | + cx="0" |
| 83 | + cy="0" |
| 84 | + r="1" |
| 85 | + gradientUnits="userSpaceOnUse" |
| 86 | + gradientTransform="translate(508.999 19.5) rotate(90.177) scale(161.501 509.002)" |
| 87 | + > |
| 88 | + <stop stop-color="var(--ui-primary)" /> |
| 89 | + <stop |
| 90 | + offset="1" |
| 91 | + stop-color="var(--ui-primary)" |
| 92 | + stop-opacity="0" |
| 93 | + /> |
| 94 | + </radialGradient> |
| 95 | + <linearGradient |
| 96 | + id="paint1_linear_846_160841" |
| 97 | + x1="10.9784" |
| 98 | + y1="91" |
| 99 | + x2="1017" |
| 100 | + y2="90.502" |
| 101 | + gradientUnits="userSpaceOnUse" |
| 102 | + > |
| 103 | + <stop |
| 104 | + stop-color="var(--ui-primary)" |
| 105 | + stop-opacity="0" |
| 106 | + /> |
| 107 | + <stop |
| 108 | + offset="0.395" |
| 109 | + stop-color="var(--ui-primary)" |
| 110 | + /> |
| 111 | + <stop |
| 112 | + offset="1" |
| 113 | + stop-color="var(--ui-primary)" |
| 114 | + stop-opacity="0" |
| 115 | + /> |
| 116 | + </linearGradient> |
| 117 | + </defs> |
| 118 | + </svg> |
| 119 | + |
| 120 | + <div class="stars size-full absolute inset-x-0 top-0"> |
| 121 | + <div |
| 122 | + v-for="(layer, index) in starLayers" |
| 123 | + :key="index" |
| 124 | + class="star-layer" |
| 125 | + :style="{ |
| 126 | + '--star-duration': `${layer.duration}s`, |
| 127 | + '--star-opacity': layer.opacity, |
| 128 | + '--star-color': color |
| 129 | + }" |
| 130 | + > |
| 131 | + <div |
| 132 | + v-for="(star, starIndex) in layer.stars" |
| 133 | + :key="starIndex" |
| 134 | + class="star absolute rounded-full" |
| 135 | + :style="{ |
| 136 | + left: `${star.x}px`, |
| 137 | + top: `${star.y}px`, |
| 138 | + width: `${star.size}px`, |
| 139 | + height: `${star.size}px`, |
| 140 | + backgroundColor: 'var(--star-color)', |
| 141 | + opacity: 'var(--star-opacity)' |
| 142 | + }" |
| 143 | + /> |
| 144 | + </div> |
| 145 | + </div> |
| 146 | + </div> |
| 147 | +</template> |
| 148 | + |
| 149 | +<style scoped> |
| 150 | +.stars { |
| 151 | + left: 50%; |
| 152 | + transform: translate(-50%); |
| 153 | + -webkit-mask-image: linear-gradient(180deg, |
| 154 | + rgba(217, 217, 217, 0) 0%, |
| 155 | + rgba(217, 217, 217, 0.8) 25%, |
| 156 | + #d9d9d9 50%, |
| 157 | + rgba(217, 217, 217, 0.8) 75%, |
| 158 | + rgba(217, 217, 217, 0) 100%); |
| 159 | + mask-image: linear-gradient(180deg, |
| 160 | + rgba(217, 217, 217, 0) 0%, |
| 161 | + rgba(217, 217, 217, 0.8) 25%, |
| 162 | + #d9d9d9 50%, |
| 163 | + rgba(217, 217, 217, 0.8) 75%, |
| 164 | + rgba(217, 217, 217, 0) 100%); |
| 165 | + -webkit-mask-size: cover; |
| 166 | + mask-size: cover; |
| 167 | +} |
| 168 | +
|
| 169 | +.star-layer { |
| 170 | + animation: risingStarsAnimation linear infinite; |
| 171 | + animation-duration: var(--star-duration); |
| 172 | + will-change: transform; |
| 173 | +} |
| 174 | +
|
| 175 | +@keyframes risingStarsAnimation { |
| 176 | + 0% { |
| 177 | + transform: translateY(0); |
| 178 | + } |
| 179 | + 100% { |
| 180 | + transform: translateY(-2000px); |
| 181 | + } |
| 182 | +} |
| 183 | +</style> |
0 commit comments