Merge pull request #93 from Utkarsh-Singhal-26/feat/laser-flow

FEAT: 🎉 New <LaserFlow /> animation

Author: DavidHDev

src/components/landing/Hero/Hero.vue

@@ -19,10 +19,10 @@
  />
 
  <div class="hero-main-content">
- <router-link to="/backgrounds/liquid-ether" class="hero-new-badge-container">
+ <router-link to="/backgrounds/laser-flow" class="hero-new-badge-container">
  <span class="hero-new-badge">New 🎉</span>
  <div class="hero-new-badge-text">
- <span>Liquid Ether</span>
+ <span>Laser Flow</span>
  <i class="pi-arrow-right pi" style="font-size: 0.8rem"></i>
  </div>
  </router-link>

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Gradual Blur', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
+export const NEW = ['Laser Flow', 'Liquid Ether', 'Staggered Menu', 'Pixel Blast', 'Gradual Blur', 'Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -37,6 +37,7 @@ export const CATEGORIES = [
  'Animated Content',
  'Fade Content',
  'Gradual Blur',
+ 'Laser Flow',
  'Noise',
  'Splash Cursor',
  'Logo Loop',

src/constants/Components.ts

@@ -23,6 +23,7 @@ const animations = {
  'sticker-peel': () => import('../demo/Animations/StickerPeelDemo.vue'),
  'electric-border': () => import('../demo/Animations/ElectricBorderDemo.vue'),
  'gradual-blur': () => import('../demo/Animations/GradualBlurDemo.vue'),
+ 'laser-flow': () => import('../demo/Animations/LaserFlowDemo.vue'),
 };
 
 const textAnimations = {

src/constants/code/Animations/gradualBlurCode.ts

@@ -3,7 +3,24 @@ import { createCodeObject } from '@/types/code';
 
 export const gradualBlur = createCodeObject(code, 'Animations/GradualBlur', {
  installation: `npm install mathjs`,
- usage: `
+ usage: `<template>
+ <section style="position: relative; height: 500px; overflow: hidden;">
+ <div style="height: 100%; overflow-y: auto; padding: 6rem 2rem;">
+ <!-- Content Here - such as an image or text -->
+ </div>
+
+ <GradualBlur
+ target="parent"
+ position="bottom"
+ height="6rem"
+ :strength="2"
+ :divCount="5"
+ curve="bezier"
+ :exponential="true"
+ :opacity="1"
+ />
+ </section>
+</template>
 
 <script setup lang="ts">
  import GradualBlur from "./GradualBlur.vue";

src/constants/code/Animations/laserFlowCode.ts

@@ -0,0 +1,99 @@
+import code from '@/content/Animations/LaserFlow/LaserFlow.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const laserFlow = createCodeObject(code, 'Animations/LaserFlow', {
+ installation: `npm install three`,
+ usage: `<template>
+ <div
+ style="height: 800px; position: relative; overflow: hidden; background-color: #060010;"
+ @mousemove="handleMouseMove"
+ @mouseleave="handleMouseLeave"
+ >
+ <LaserFlow
+ :horizontalBeamOffset="0.1"
+ :verticalBeamOffset="0.0"
+ color="#FF79C6"
+ />
+
+ <div
+ style="
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 86%;
+ height: 60%;
+ background-color: #060010;
+ border-radius: 20px;
+ border: 2px solid #FF79C6;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 2rem;
+ z-index: 6;
+ "
+ >
+ <!-- Your content here -->
+ Example Box Content
+ </div>
+
+ <img
+ ref="revealImgRef"
+ src="/path/to/image.jpg"
+ alt="Reveal effect"
+ style="
+ position: absolute;
+ width: 100%;
+ top: -50%;
+ z-index: 5;
+ mix-blend-mode: lighten;
+ opacity: 0.3;
+ pointer-events: none;
+ --mx: -9999px;
+ --my: -9999px;
+ -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my),
+ rgba(255,255,255,1) 0px,
+ rgba(255,255,255,0.95) 60px,
+ rgba(255,255,255,0.6) 120px,
+ rgba(255,255,255,0.25) 180px,
+ rgba(255,255,255,0) 240px);
+ mask-image: radial-gradient(circle at var(--mx) var(--my),
+ rgba(255,255,255,1) 0px,
+ rgba(255,255,255,0.95) 60px,
+ rgba(255,255,255,0.6) 120px,
+ rgba(255,255,255,0.25) 180px,
+ rgba(255,255,255,0) 240px);
+ -webkit-mask-repeat: no-repeat;
+ mask-repeat: no-repeat;
+ "
+ />
+ </div>
+</template>
+
+<script setup>
+import { useTemplateRef } from 'vue'
+import LaserFlow from './LaserFlow.vue'
+
+const revealImgRef = useTemplateRef('revealImgRef')
+
+function handleMouseMove(e) {
+ const rect = e.currentTarget.getBoundingClientRect()
+ const x = e.clientX - rect.left
+ const y = e.clientY - rect.top
+ const el = revealImgRef.value
+ if (el) {
+ el.style.setProperty('--mx', '\${x}px')
+ el.style.setProperty('--my', '\${y + rect.height * 0.5}px')
+ }
+}
+
+function handleMouseLeave() {
+ const el = revealImgRef.value
+ if (el) {
+ el.style.setProperty('--mx', '-9999px')
+ el.style.setProperty('--my', '-9999px')
+ }
+}
+</script>`
+});