mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 22:49:31 -07:00
Merge branch 'main' into feat/true-focus
This commit is contained in:
David
GitHub
@@ -39,7 +39,7 @@
|
||||
|
||||
.footer-description {
|
||||
font-size: 1rem;
|
||||
color: rgba(161, 148, 184, 0.9);
|
||||
color: rgba(148, 184, 164, 0.9);
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
@@ -66,7 +66,7 @@
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(161, 148, 184, 0.7);
|
||||
color: rgba(148, 184, 163, 0.7);
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -19,7 +19,8 @@ export const CATEGORIES = [
|
||||
'Falling Text',
|
||||
'Text Cursor',
|
||||
'Decrypted Text',
|
||||
'True Focus'
|
||||
'True Focus',
|
||||
'Scroll Float',
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -60,6 +61,7 @@ export const CATEGORIES = [
|
||||
name: 'Backgrounds',
|
||||
subcategories: [
|
||||
'Aurora',
|
||||
'Beams',
|
||||
'Dot Grid',
|
||||
'Silk',
|
||||
'Lightning',
|
||||
@@ -71,4 +73,4 @@ export const CATEGORIES = [
|
||||
'Threads',
|
||||
],
|
||||
}
|
||||
];
|
||||
];
|
||||
|
||||
@@ -24,6 +24,7 @@ const textAnimations = {
|
||||
'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
|
||||
'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
|
||||
'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
|
||||
'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
|
||||
};
|
||||
|
||||
const components = {
|
||||
@@ -55,6 +56,7 @@ const backgrounds = {
|
||||
'iridescence': () => import("../demo/Backgrounds/IridescenceDemo.vue"),
|
||||
'threads': () => import("../demo/Backgrounds/ThreadsDemo.vue"),
|
||||
'aurora': () => import("../demo/Backgrounds/AuroraDemo.vue"),
|
||||
'beams': () => import("../demo/Backgrounds/BeamsDemo.vue"),
|
||||
};
|
||||
|
||||
export const componentMap = {
|
||||
|
||||
36
src/constants/code/Backgrounds/beamsCode.ts
Normal file
36
src/constants/code/Backgrounds/beamsCode.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import code from '@content/Backgrounds/Beams/Beams.vue?raw'
|
||||
import type { CodeObject } from '../../../types/code'
|
||||
|
||||
export const beams: CodeObject = {
|
||||
cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Beams`,
|
||||
installation: `npm install three`,
|
||||
usage: `<template>
|
||||
<div class="beams-container">
|
||||
<Beams
|
||||
:beam-width="2"
|
||||
:beam-height="15"
|
||||
:beam-number="12"
|
||||
:light-color="'#ffffff'"
|
||||
:speed="2"
|
||||
:noise-intensity="1.75"
|
||||
:scale="0.2"
|
||||
:rotation="0"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Beams from "./Beams.vue";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.beams-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
</style>`,
|
||||
code
|
||||
}
|
||||
25
src/constants/code/TextAnimations/scrollFloatCode.ts
Normal file
25
src/constants/code/TextAnimations/scrollFloatCode.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw'
|
||||
import type { CodeObject } from '../../../types/code'
|
||||
|
||||
export const scrollFloatCode: CodeObject = {
|
||||
cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
|
||||
usage: `<template>
|
||||
<ScrollFloat
|
||||
:children="scrollText"
|
||||
:animation-duration="animationDuration"
|
||||
:ease="ease"
|
||||
:scroll-start="scrollStart"
|
||||
:scroll-end="scrollEnd"
|
||||
:stagger="stagger"
|
||||
:container-class-name="containerClassName"
|
||||
:text-class-name="textClassName"
|
||||
:scroll-container-ref="{ current: containerRef }"
|
||||
:key="rerenderKey"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ScrollFloat from "./ScrollFloat.vue";
|
||||
</script>`,
|
||||
code
|
||||
}
|
||||
455
src/content/Backgrounds/Beams/Beams.vue
Normal file
455
src/content/Backgrounds/Beams/Beams.vue
Normal file
@@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<div ref="containerRef" class="beams-container w-full h-full relative" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
import { degToRad } from 'three/src/math/MathUtils.js'
|
||||
|
||||
interface BeamsProps {
|
||||
beamWidth?: number
|
||||
beamHeight?: number
|
||||
beamNumber?: number
|
||||
lightColor?: string
|
||||
speed?: number
|
||||
noiseIntensity?: number
|
||||
scale?: number
|
||||
rotation?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<BeamsProps>(), {
|
||||
beamWidth: 2,
|
||||
beamHeight: 15,
|
||||
beamNumber: 12,
|
||||
lightColor: '#ffffff',
|
||||
speed: 2,
|
||||
noiseIntensity: 1.75,
|
||||
scale: 0.2,
|
||||
rotation: 0
|
||||
})
|
||||
|
||||
const containerRef = ref<HTMLDivElement>()
|
||||
|
||||
let renderer: THREE.WebGLRenderer | null = null
|
||||
let scene: THREE.Scene | null = null
|
||||
let camera: THREE.PerspectiveCamera | null = null
|
||||
let beamMesh: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial> | null = null
|
||||
let directionalLight: THREE.DirectionalLight | null = null
|
||||
let ambientLight: THREE.AmbientLight | null = null
|
||||
let animationId: number | null = null
|
||||
|
||||
type UniformValue = THREE.IUniform<unknown> | unknown
|
||||
|
||||
interface ExtendMaterialConfig {
|
||||
header: string
|
||||
vertexHeader?: string
|
||||
fragmentHeader?: string
|
||||
material?: THREE.MeshPhysicalMaterialParameters & { fog?: boolean }
|
||||
uniforms?: Record<string, UniformValue>
|
||||
vertex?: Record<string, string>
|
||||
fragment?: Record<string, string>
|
||||
}
|
||||
|
||||
type ShaderWithDefines = THREE.ShaderLibShader & {
|
||||
defines?: Record<string, string | number | boolean>
|
||||
}
|
||||
|
||||
const hexToNormalizedRGB = (hex: string): [number, number, number] => {
|
||||
const clean = hex.replace('#', '')
|
||||
const r = parseInt(clean.substring(0, 2), 16)
|
||||
const g = parseInt(clean.substring(2, 4), 16)
|
||||
const b = parseInt(clean.substring(4, 6), 16)
|
||||
return [r / 255, g / 255, b / 255]
|
||||
}
|
||||
|
||||
const noise = `
|
||||
float random (in vec2 st) {
|
||||
return fract(sin(dot(st.xy,
|
||||
vec2(12.9898,78.233)))*
|
||||
43758.5453123);
|
||||
}
|
||||
float noise (in vec2 st) {
|
||||
vec2 i = floor(st);
|
||||
vec2 f = fract(st);
|
||||
float a = random(i);
|
||||
float b = random(i + vec2(1.0, 0.0));
|
||||
float c = random(i + vec2(0.0, 1.0));
|
||||
float d = random(i + vec2(1.0, 1.0));
|
||||
vec2 u = f * f * (3.0 - 2.0 * f);
|
||||
return mix(a, b, u.x) +
|
||||
(c - a)* u.y * (1.0 - u.x) +
|
||||
(d - b) * u.x * u.y;
|
||||
}
|
||||
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
|
||||
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
|
||||
vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
|
||||
float cnoise(vec3 P){
|
||||
vec3 Pi0 = floor(P);
|
||||
vec3 Pi1 = Pi0 + vec3(1.0);
|
||||
Pi0 = mod(Pi0, 289.0);
|
||||
Pi1 = mod(Pi1, 289.0);
|
||||
vec3 Pf0 = fract(P);
|
||||
vec3 Pf1 = Pf0 - vec3(1.0);
|
||||
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
|
||||
vec4 iy = vec4(Pi0.yy, Pi1.yy);
|
||||
vec4 iz0 = Pi0.zzzz;
|
||||
vec4 iz1 = Pi1.zzzz;
|
||||
vec4 ixy = permute(permute(ix) + iy);
|
||||
vec4 ixy0 = permute(ixy + iz0);
|
||||
vec4 ixy1 = permute(ixy + iz1);
|
||||
vec4 gx0 = ixy0 / 7.0;
|
||||
vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
|
||||
gx0 = fract(gx0);
|
||||
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
|
||||
vec4 sz0 = step(gz0, vec4(0.0));
|
||||
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
|
||||
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
|
||||
vec4 gx1 = ixy1 / 7.0;
|
||||
vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
|
||||
gx1 = fract(gx1);
|
||||
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
|
||||
vec4 sz1 = step(gz1, vec4(0.0));
|
||||
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
|
||||
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
|
||||
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
|
||||
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
|
||||
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
|
||||
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
|
||||
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
|
||||
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
|
||||
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
|
||||
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
|
||||
vec4 norm0 = taylorInvSqrt(vec4(dot(g000,g000),dot(g010,g010),dot(g100,g100),dot(g110,g110)));
|
||||
g000 *= norm0.x; g010 *= norm0.y; g100 *= norm0.z; g110 *= norm0.w;
|
||||
vec4 norm1 = taylorInvSqrt(vec4(dot(g001,g001),dot(g011,g011),dot(g101,g101),dot(g111,g111)));
|
||||
g001 *= norm1.x; g011 *= norm1.y; g101 *= norm1.z; g111 *= norm1.w;
|
||||
float n000 = dot(g000, Pf0);
|
||||
float n100 = dot(g100, vec3(Pf1.x,Pf0.yz));
|
||||
float n010 = dot(g010, vec3(Pf0.x,Pf1.y,Pf0.z));
|
||||
float n110 = dot(g110, vec3(Pf1.xy,Pf0.z));
|
||||
float n001 = dot(g001, vec3(Pf0.xy,Pf1.z));
|
||||
float n101 = dot(g101, vec3(Pf1.x,Pf0.y,Pf1.z));
|
||||
float n011 = dot(g011, vec3(Pf0.x,Pf1.yz));
|
||||
float n111 = dot(g111, Pf1);
|
||||
vec3 fade_xyz = fade(Pf0);
|
||||
vec4 n_z = mix(vec4(n000,n100,n010,n110),vec4(n001,n101,n011,n111),fade_xyz.z);
|
||||
vec2 n_yz = mix(n_z.xy,n_z.zw,fade_xyz.y);
|
||||
float n_xyz = mix(n_yz.x,n_yz.y,fade_xyz.x);
|
||||
return 2.2 * n_xyz;
|
||||
}
|
||||
`
|
||||
|
||||
function extendMaterial<T extends THREE.Material = THREE.Material>(
|
||||
BaseMaterial: new (params?: THREE.MaterialParameters) => T,
|
||||
cfg: ExtendMaterialConfig
|
||||
): THREE.ShaderMaterial {
|
||||
const physical = THREE.ShaderLib.physical as ShaderWithDefines
|
||||
const {
|
||||
vertexShader: baseVert,
|
||||
fragmentShader: baseFrag,
|
||||
uniforms: baseUniforms,
|
||||
} = physical
|
||||
const baseDefines = physical.defines ?? {}
|
||||
|
||||
const uniforms: Record<string, THREE.IUniform> =
|
||||
THREE.UniformsUtils.clone(baseUniforms)
|
||||
|
||||
const defaults = new BaseMaterial(cfg.material || {}) as T & {
|
||||
color?: THREE.Color
|
||||
roughness?: number
|
||||
metalness?: number
|
||||
envMap?: THREE.Texture
|
||||
envMapIntensity?: number
|
||||
}
|
||||
|
||||
if (defaults.color) uniforms.diffuse.value = defaults.color
|
||||
if ('roughness' in defaults) uniforms.roughness.value = defaults.roughness
|
||||
if ('metalness' in defaults) uniforms.metalness.value = defaults.metalness
|
||||
if ('envMap' in defaults) uniforms.envMap.value = defaults.envMap
|
||||
if ('envMapIntensity' in defaults)
|
||||
uniforms.envMapIntensity.value = defaults.envMapIntensity
|
||||
|
||||
Object.entries(cfg.uniforms ?? {}).forEach(([key, u]) => {
|
||||
uniforms[key] =
|
||||
u !== null && typeof u === 'object' && 'value' in u
|
||||
? (u as THREE.IUniform<unknown>)
|
||||
: ({ value: u } as THREE.IUniform<unknown>)
|
||||
})
|
||||
|
||||
let vert = `${cfg.header}\n${cfg.vertexHeader ?? ''}\n${baseVert}`
|
||||
let frag = `${cfg.header}\n${cfg.fragmentHeader ?? ''}\n${baseFrag}`
|
||||
|
||||
for (const [inc, code] of Object.entries(cfg.vertex ?? {})) {
|
||||
vert = vert.replace(inc, `${inc}\n${code}`)
|
||||
}
|
||||
for (const [inc, code] of Object.entries(cfg.fragment ?? {})) {
|
||||
frag = frag.replace(inc, `${inc}\n${code}`)
|
||||
}
|
||||
|
||||
const mat = new THREE.ShaderMaterial({
|
||||
defines: { ...baseDefines },
|
||||
uniforms,
|
||||
vertexShader: vert,
|
||||
fragmentShader: frag,
|
||||
lights: true,
|
||||
fog: !!cfg.material?.fog,
|
||||
})
|
||||
|
||||
return mat
|
||||
}
|
||||
|
||||
function createStackedPlanesBufferGeometry(
|
||||
n: number,
|
||||
width: number,
|
||||
height: number,
|
||||
spacing: number,
|
||||
heightSegments: number
|
||||
): THREE.BufferGeometry {
|
||||
const geometry = new THREE.BufferGeometry()
|
||||
const numVertices = n * (heightSegments + 1) * 2
|
||||
const numFaces = n * heightSegments * 2
|
||||
const positions = new Float32Array(numVertices * 3)
|
||||
const indices = new Uint32Array(numFaces * 3)
|
||||
const uvs = new Float32Array(numVertices * 2)
|
||||
|
||||
let vertexOffset = 0
|
||||
let indexOffset = 0
|
||||
let uvOffset = 0
|
||||
const totalWidth = n * width + (n - 1) * spacing
|
||||
const xOffsetBase = -totalWidth / 2
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const xOffset = xOffsetBase + i * (width + spacing)
|
||||
const uvXOffset = Math.random() * 300
|
||||
const uvYOffset = Math.random() * 300
|
||||
|
||||
for (let j = 0; j <= heightSegments; j++) {
|
||||
const y = height * (j / heightSegments - 0.5)
|
||||
const v0 = [xOffset, y, 0]
|
||||
const v1 = [xOffset + width, y, 0]
|
||||
positions.set([...v0, ...v1], vertexOffset * 3)
|
||||
|
||||
const uvY = j / heightSegments
|
||||
uvs.set(
|
||||
[uvXOffset, uvY + uvYOffset, uvXOffset + 1, uvY + uvYOffset],
|
||||
uvOffset
|
||||
)
|
||||
|
||||
if (j < heightSegments) {
|
||||
const a = vertexOffset,
|
||||
b = vertexOffset + 1,
|
||||
c = vertexOffset + 2,
|
||||
d = vertexOffset + 3
|
||||
indices.set([a, b, c, c, b, d], indexOffset)
|
||||
indexOffset += 6
|
||||
}
|
||||
vertexOffset += 2
|
||||
uvOffset += 4
|
||||
}
|
||||
}
|
||||
|
||||
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
|
||||
geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2))
|
||||
geometry.setIndex(new THREE.BufferAttribute(indices, 1))
|
||||
geometry.computeVertexNormals()
|
||||
return geometry
|
||||
}
|
||||
|
||||
const beamMaterial = computed(() =>
|
||||
extendMaterial(THREE.MeshStandardMaterial, {
|
||||
header: `
|
||||
varying vec3 vEye;
|
||||
varying float vNoise;
|
||||
varying vec2 vUv;
|
||||
varying vec3 vPosition;
|
||||
uniform float time;
|
||||
uniform float uSpeed;
|
||||
uniform float uNoiseIntensity;
|
||||
uniform float uScale;
|
||||
${noise}`,
|
||||
vertexHeader: `
|
||||
float getPos(vec3 pos) {
|
||||
vec3 noisePos =
|
||||
vec3(pos.x * 0., pos.y - uv.y, pos.z + time * uSpeed * 3.) * uScale;
|
||||
return cnoise(noisePos);
|
||||
}
|
||||
vec3 getCurrentPos(vec3 pos) {
|
||||
vec3 newpos = pos;
|
||||
newpos.z += getPos(pos);
|
||||
return newpos;
|
||||
}
|
||||
vec3 getNormal(vec3 pos) {
|
||||
vec3 curpos = getCurrentPos(pos);
|
||||
vec3 nextposX = getCurrentPos(pos + vec3(0.01, 0.0, 0.0));
|
||||
vec3 nextposZ = getCurrentPos(pos + vec3(0.0, -0.01, 0.0));
|
||||
vec3 tangentX = normalize(nextposX - curpos);
|
||||
vec3 tangentZ = normalize(nextposZ - curpos);
|
||||
return normalize(cross(tangentZ, tangentX));
|
||||
}`,
|
||||
fragmentHeader: '',
|
||||
vertex: {
|
||||
'#include <begin_vertex>': `transformed.z += getPos(transformed.xyz);`,
|
||||
'#include <beginnormal_vertex>': `objectNormal = getNormal(position.xyz);`,
|
||||
},
|
||||
fragment: {
|
||||
'#include <dithering_fragment>': `
|
||||
float randomNoise = noise(gl_FragCoord.xy);
|
||||
gl_FragColor.rgb -= randomNoise / 15. * uNoiseIntensity;`,
|
||||
},
|
||||
material: { fog: true },
|
||||
uniforms: {
|
||||
diffuse: new THREE.Color(...hexToNormalizedRGB('#000000')),
|
||||
time: { shared: true, mixed: true, linked: true, value: 0 },
|
||||
roughness: 0.3,
|
||||
metalness: 0.3,
|
||||
uSpeed: { shared: true, mixed: true, linked: true, value: props.speed },
|
||||
envMapIntensity: 10,
|
||||
uNoiseIntensity: props.noiseIntensity,
|
||||
uScale: props.scale,
|
||||
},
|
||||
})
|
||||
)
|
||||
|
||||
const initThreeJS = () => {
|
||||
if (!containerRef.value) return
|
||||
|
||||
cleanup()
|
||||
|
||||
const container = containerRef.value
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
|
||||
renderer.setClearColor(0x000000, 1)
|
||||
|
||||
scene = new THREE.Scene()
|
||||
|
||||
camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000)
|
||||
camera.position.set(0, 0, 20)
|
||||
|
||||
const geometry = createStackedPlanesBufferGeometry(
|
||||
props.beamNumber,
|
||||
props.beamWidth,
|
||||
props.beamHeight,
|
||||
0,
|
||||
100
|
||||
)
|
||||
|
||||
const material = beamMaterial.value
|
||||
beamMesh = new THREE.Mesh(geometry, material)
|
||||
|
||||
const group = new THREE.Group()
|
||||
group.rotation.z = degToRad(props.rotation)
|
||||
group.add(beamMesh)
|
||||
scene.add(group)
|
||||
|
||||
directionalLight = new THREE.DirectionalLight(new THREE.Color(props.lightColor), 1)
|
||||
directionalLight.position.set(0, 3, 10)
|
||||
const shadowCamera = directionalLight.shadow.camera as THREE.OrthographicCamera
|
||||
shadowCamera.top = 24
|
||||
shadowCamera.bottom = -24
|
||||
shadowCamera.left = -24
|
||||
shadowCamera.right = 24
|
||||
shadowCamera.far = 64
|
||||
directionalLight.shadow.bias = -0.004
|
||||
scene.add(directionalLight)
|
||||
|
||||
ambientLight = new THREE.AmbientLight(0xffffff, 1)
|
||||
scene.add(ambientLight)
|
||||
|
||||
container.appendChild(renderer.domElement)
|
||||
|
||||
const resize = () => {
|
||||
if (!container || !renderer || !camera) return
|
||||
|
||||
const width = container.offsetWidth
|
||||
const height = container.offsetHeight
|
||||
|
||||
renderer.setSize(width, height)
|
||||
camera.aspect = width / height
|
||||
camera.updateProjectionMatrix()
|
||||
}
|
||||
|
||||
const resizeObserver = new ResizeObserver(resize)
|
||||
resizeObserver.observe(container)
|
||||
|
||||
resize()
|
||||
|
||||
const animate = () => {
|
||||
animationId = requestAnimationFrame(animate)
|
||||
|
||||
if (beamMesh && beamMesh.material) {
|
||||
beamMesh.material.uniforms.time.value += 0.1 * 0.016
|
||||
}
|
||||
|
||||
if (renderer && scene && camera) {
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
}
|
||||
|
||||
animationId = requestAnimationFrame(animate)
|
||||
|
||||
;(container as HTMLDivElement & { _resizeObserver?: ResizeObserver })._resizeObserver = resizeObserver
|
||||
}
|
||||
|
||||
const cleanup = () => {
|
||||
if (animationId) {
|
||||
cancelAnimationFrame(animationId)
|
||||
animationId = null
|
||||
}
|
||||
|
||||
if (containerRef.value) {
|
||||
const container = containerRef.value as HTMLDivElement & { _resizeObserver?: ResizeObserver }
|
||||
|
||||
if (container._resizeObserver) {
|
||||
container._resizeObserver.disconnect()
|
||||
delete container._resizeObserver
|
||||
}
|
||||
|
||||
if (renderer && renderer.domElement.parentNode === container) {
|
||||
container.removeChild(renderer.domElement)
|
||||
}
|
||||
}
|
||||
|
||||
if (beamMesh) {
|
||||
if (beamMesh.geometry) beamMesh.geometry.dispose()
|
||||
if (beamMesh.material) beamMesh.material.dispose()
|
||||
beamMesh = null
|
||||
}
|
||||
|
||||
if (renderer) {
|
||||
renderer.dispose()
|
||||
renderer = null
|
||||
}
|
||||
|
||||
scene = null
|
||||
camera = null
|
||||
directionalLight = null
|
||||
ambientLight = null
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [
|
||||
props.beamWidth,
|
||||
props.beamHeight,
|
||||
props.beamNumber,
|
||||
props.lightColor,
|
||||
props.speed,
|
||||
props.noiseIntensity,
|
||||
props.scale,
|
||||
props.rotation,
|
||||
],
|
||||
() => {
|
||||
initThreeJS()
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
initThreeJS()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
cleanup()
|
||||
})
|
||||
</script>
|
||||
123
src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
Normal file
123
src/content/TextAnimations/ScrollFloat/ScrollFloat.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<h2 ref="containerRef" :class="`overflow-hidden ${containerClassName}`">
|
||||
<span :class="`inline-block text-center leading-relaxed font-black ${textClassName}`" style="font-size: clamp(1.6rem, 8vw, 10rem);">
|
||||
<span
|
||||
v-for="(char, index) in splitText"
|
||||
:key="index"
|
||||
class="inline-block char"
|
||||
>
|
||||
{{ char === " " ? "\u00A0" : char }}
|
||||
</span>
|
||||
</span>
|
||||
</h2>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { gsap } from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
interface Props {
|
||||
children: string;
|
||||
scrollContainerRef?: { current: HTMLElement | null };
|
||||
containerClassName?: string;
|
||||
textClassName?: string;
|
||||
animationDuration?: number;
|
||||
ease?: string;
|
||||
scrollStart?: string;
|
||||
scrollEnd?: string;
|
||||
stagger?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
containerClassName: '',
|
||||
textClassName: '',
|
||||
animationDuration: 1,
|
||||
ease: 'back.inOut(2)',
|
||||
scrollStart: 'center bottom+=50%',
|
||||
scrollEnd: 'bottom bottom-=40%',
|
||||
stagger: 0.03
|
||||
});
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null);
|
||||
let scrollTriggerInstance: ScrollTrigger | null = null;
|
||||
|
||||
const splitText = computed(() => {
|
||||
const text = typeof props.children === 'string' ? props.children : '';
|
||||
return text.split("");
|
||||
});
|
||||
|
||||
const initializeAnimation = () => {
|
||||
const el = containerRef.value;
|
||||
if (!el) return;
|
||||
|
||||
const scroller =
|
||||
props.scrollContainerRef && props.scrollContainerRef.current
|
||||
? props.scrollContainerRef.current
|
||||
: window;
|
||||
|
||||
const charElements = el.querySelectorAll('.char');
|
||||
|
||||
if (scrollTriggerInstance) {
|
||||
scrollTriggerInstance.kill();
|
||||
}
|
||||
|
||||
const tl = gsap.fromTo(
|
||||
charElements,
|
||||
{
|
||||
willChange: 'opacity, transform',
|
||||
opacity: 0,
|
||||
yPercent: 120,
|
||||
scaleY: 2.3,
|
||||
scaleX: 0.7,
|
||||
transformOrigin: '50% 0%'
|
||||
},
|
||||
{
|
||||
duration: props.animationDuration,
|
||||
ease: props.ease,
|
||||
opacity: 1,
|
||||
yPercent: 0,
|
||||
scaleY: 1,
|
||||
scaleX: 1,
|
||||
stagger: props.stagger,
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
scroller,
|
||||
start: props.scrollStart,
|
||||
end: props.scrollEnd,
|
||||
scrub: true
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
scrollTriggerInstance = tl.scrollTrigger || null;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initializeAnimation();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (scrollTriggerInstance) {
|
||||
scrollTriggerInstance.kill();
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
[
|
||||
() => props.children,
|
||||
() => props.scrollContainerRef,
|
||||
() => props.animationDuration,
|
||||
() => props.ease,
|
||||
() => props.scrollStart,
|
||||
() => props.scrollEnd,
|
||||
() => props.stagger
|
||||
],
|
||||
() => {
|
||||
initializeAnimation();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
180
src/demo/Backgrounds/BeamsDemo.vue
Normal file
180
src/demo/Backgrounds/BeamsDemo.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="beams-demo">
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container">
|
||||
<Beams
|
||||
:beam-width="beamWidth"
|
||||
:beam-height="beamHeight"
|
||||
:beam-number="beamNumber"
|
||||
:light-color="lightColor"
|
||||
:speed="speed"
|
||||
:noise-intensity="noiseIntensity"
|
||||
:scale="scale"
|
||||
:rotation="rotation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewColor title="Color" :model-value="lightColor" @update:model-value="lightColor = $event" />
|
||||
|
||||
<PreviewSlider
|
||||
title="Beam Width"
|
||||
:model-value="beamWidth"
|
||||
@update:model-value="beamWidth = $event"
|
||||
:min="0.1"
|
||||
:max="10"
|
||||
:step="0.1"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Beam Height"
|
||||
:model-value="beamHeight"
|
||||
@update:model-value="beamHeight = $event"
|
||||
:min="1"
|
||||
:max="25"
|
||||
:step="1"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Beam Count"
|
||||
:model-value="beamNumber"
|
||||
@update:model-value="beamNumber = $event"
|
||||
:min="1"
|
||||
:max="50"
|
||||
:step="1"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Speed"
|
||||
:model-value="speed"
|
||||
@update:model-value="speed = $event"
|
||||
:min="0.1"
|
||||
:max="10"
|
||||
:step="0.1"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Noise Intensity"
|
||||
:model-value="noiseIntensity"
|
||||
@update:model-value="noiseIntensity = $event"
|
||||
:min="0"
|
||||
:max="5"
|
||||
:step="0.05"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Noise Scale"
|
||||
:model-value="scale"
|
||||
@update:model-value="scale = $event"
|
||||
:min="0.01"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
/>
|
||||
|
||||
<PreviewSlider
|
||||
title="Rotation"
|
||||
:model-value="rotation"
|
||||
@update:model-value="rotation = $event"
|
||||
:min="0"
|
||||
:max="360"
|
||||
:step="1"
|
||||
/>
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['three']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="beams" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="beams.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import TabbedLayout from '@/components/common/TabbedLayout.vue'
|
||||
import PropTable from '@/components/common/PropTable.vue'
|
||||
import Dependencies from '@/components/code/Dependencies.vue'
|
||||
import CliInstallation from '@/components/code/CliInstallation.vue'
|
||||
import CodeExample from '@/components/code/CodeExample.vue'
|
||||
import Customize from '@/components/common/Customize.vue'
|
||||
import Beams from '@/content/Backgrounds/Beams/Beams.vue'
|
||||
import PreviewColor from '@/components/common/PreviewColor.vue'
|
||||
import PreviewSlider from '@/components/common/PreviewSlider.vue'
|
||||
import { beams } from '@/constants/code/Backgrounds/beamsCode'
|
||||
|
||||
const beamWidth = ref(3)
|
||||
const beamHeight = ref(30)
|
||||
const beamNumber = ref(20)
|
||||
const lightColor = ref('#ffffff')
|
||||
const speed = ref(2)
|
||||
const noiseIntensity = ref(1.75)
|
||||
const scale = ref(0.2)
|
||||
const rotation = ref(30)
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'beamWidth',
|
||||
type: 'number',
|
||||
default: '2',
|
||||
description: 'Width of each beam.'
|
||||
},
|
||||
{
|
||||
name: 'beamHeight',
|
||||
type: 'number',
|
||||
default: '15',
|
||||
description: 'Height of each beam.'
|
||||
},
|
||||
{
|
||||
name: 'beamNumber',
|
||||
type: 'number',
|
||||
default: '12',
|
||||
description: 'Number of beams to display.'
|
||||
},
|
||||
{
|
||||
name: 'lightColor',
|
||||
type: 'string',
|
||||
default: "'#ffffff'",
|
||||
description: 'Color of the directional light.'
|
||||
},
|
||||
{
|
||||
name: 'speed',
|
||||
type: 'number',
|
||||
default: '2',
|
||||
description: 'Speed of the animation.'
|
||||
},
|
||||
{
|
||||
name: 'noiseIntensity',
|
||||
type: 'number',
|
||||
default: '1.75',
|
||||
description: 'Intensity of the noise effect overlay.'
|
||||
},
|
||||
{
|
||||
name: 'scale',
|
||||
type: 'number',
|
||||
default: '0.2',
|
||||
description: 'Scale of the noise pattern.'
|
||||
},
|
||||
{
|
||||
name: 'rotation',
|
||||
type: 'number',
|
||||
default: '0',
|
||||
description: 'Rotation of the entire beams system in degrees.'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
189
src/demo/TextAnimations/ScrollFloatDemo.vue
Normal file
189
src/demo/TextAnimations/ScrollFloatDemo.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="demo-container"
|
||||
@wheel="smoothScroll"
|
||||
>
|
||||
|
||||
<div class="scroll-instruction">
|
||||
Scroll Down
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<ScrollFloat
|
||||
:children="scrollText"
|
||||
:animation-duration="animationDuration"
|
||||
:ease="ease"
|
||||
:scroll-start="scrollStart"
|
||||
:scroll-end="scrollEnd"
|
||||
:stagger="stagger"
|
||||
:container-class-name="containerClassName"
|
||||
:text-class-name="textClassName"
|
||||
:scroll-container-ref="{ current: containerRef }"
|
||||
:key="rerenderKey"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
|
||||
<PreviewSlider title="Stagger:" v-model="stagger" :min="0.01" :max="0.1" :step="0.01" value-unit="s" />
|
||||
<PreviewSlider title="Animation Duration:" v-model="animationDuration" :min="1" :max="10" :step="0.1" value-unit="s" />
|
||||
|
||||
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="scrollFloatCode" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="scrollFloatCode.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { gsap } from 'gsap'
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue'
|
||||
import PropTable from '../../components/common/PropTable.vue'
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue'
|
||||
import CodeExample from '../../components/code/CodeExample.vue'
|
||||
import Customize from '../../components/common/Customize.vue'
|
||||
import ScrollFloat from '../../content/TextAnimations/ScrollFloat/ScrollFloat.vue'
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue'
|
||||
import { scrollFloatCode } from '@/constants/code/TextAnimations/scrollFloatCode'
|
||||
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const scrollText = ref("vuebits")
|
||||
const animationDuration = ref(1)
|
||||
const ease = ref('back.inOut(2)')
|
||||
const scrollStart = ref('center bottom+=50%')
|
||||
const scrollEnd = ref('bottom bottom-=40%')
|
||||
const stagger = ref(0.03)
|
||||
const containerClassName = ref("")
|
||||
const textClassName = ref("")
|
||||
const rerenderKey = ref(0)
|
||||
|
||||
|
||||
const smoothScroll = (e: WheelEvent) => {
|
||||
e.preventDefault()
|
||||
const container = containerRef.value
|
||||
if (!container) return
|
||||
|
||||
const delta = e.deltaY || e.detail
|
||||
const scrollAmount = delta * 2
|
||||
|
||||
gsap.to(container, {
|
||||
scrollTop: container.scrollTop + scrollAmount,
|
||||
duration: 2,
|
||||
ease: "power3.out",
|
||||
overwrite: "auto"
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
const container = containerRef.value
|
||||
if (container) {
|
||||
container.addEventListener('wheel', smoothScroll, { passive: false })
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
const container = containerRef.value
|
||||
if (container) {
|
||||
container.removeEventListener('wheel', smoothScroll)
|
||||
}
|
||||
})
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'children',
|
||||
type: 'string',
|
||||
default: '""',
|
||||
description: 'The text content to be animated character by character'
|
||||
},
|
||||
{
|
||||
name: 'scrollContainerRef',
|
||||
type: 'object',
|
||||
default: 'undefined',
|
||||
description: 'Ref to a custom scroll container (defaults to window)'
|
||||
},
|
||||
{
|
||||
name: 'containerClassName',
|
||||
type: 'string',
|
||||
default: '""',
|
||||
description: 'Additional CSS classes for the container element'
|
||||
},
|
||||
{
|
||||
name: 'textClassName',
|
||||
type: 'string',
|
||||
default: '""',
|
||||
description: 'Additional CSS classes for the text element'
|
||||
},
|
||||
{
|
||||
name: 'animationDuration',
|
||||
type: 'number',
|
||||
default: '1',
|
||||
description: 'Duration of the animation in seconds'
|
||||
},
|
||||
{
|
||||
name: 'ease',
|
||||
type: 'string',
|
||||
default: '"back.inOut(2)"',
|
||||
description: 'GSAP easing function for the animation'
|
||||
},
|
||||
{
|
||||
name: 'scrollStart',
|
||||
type: 'string',
|
||||
default: '"center bottom+=50%"',
|
||||
description: 'ScrollTrigger start position'
|
||||
},
|
||||
{
|
||||
name: 'scrollEnd',
|
||||
type: 'string',
|
||||
default: '"bottom bottom-=40%"',
|
||||
description: 'ScrollTrigger end position'
|
||||
},
|
||||
{
|
||||
name: 'stagger',
|
||||
type: 'number',
|
||||
default: '0.03',
|
||||
description: 'Delay between each character animation'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
height: 60vh ;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
padding-top: 150vh !important;
|
||||
padding-bottom: 50vh;
|
||||
}
|
||||
.scroll-instruction {
|
||||
text-align: center;
|
||||
color: #271E37;
|
||||
font-size: clamp(4rem, 6vw, 4rem);
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.scroll-content{
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user