mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-04-22 01:54:38 -06:00
Merge branch 'main' into feat/infinite-menu
This commit is contained in:
David
GitHub
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div
|
||||
class="relative w-full h-[600px] overflow-hidden demo-container"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseleave="handleMouseLeave"
|
||||
ref="containerRef"
|
||||
>
|
||||
<RefreshButton @click="forceRerender" />
|
||||
|
||||
<LaserFlow
|
||||
:horizontal-beam-offset="selectedExample === 'box' ? 0.1 : 0.0"
|
||||
:vertical-beam-offset="selectedExample === 'box' ? -0.2 : -0.5"
|
||||
:horizontal-sizing="horizontalSizing"
|
||||
:vertical-sizing="verticalSizing"
|
||||
:wisp-density="wispDensity"
|
||||
:wisp-speed="wispSpeed"
|
||||
:wisp-intensity="wispIntensity"
|
||||
:flow-speed="flowSpeed"
|
||||
:flow-strength="flowStrength"
|
||||
:fog-intensity="fogIntensity"
|
||||
:fog-scale="fogScale"
|
||||
:fog-fall-speed="fogFallSpeed"
|
||||
:decay="decay"
|
||||
:dpr="1"
|
||||
:falloff-start="falloffStart"
|
||||
:color="laserColor"
|
||||
:key="key"
|
||||
:class-name="`laser-flow-demo-${selectedExample}`"
|
||||
/>
|
||||
|
||||
<template v-if="selectedExample === 'box'">
|
||||
<div
|
||||
class="top-[70%] left-1/2 z-[6] absolute flex justify-center items-center bg-black border-2 rounded-[20px] w-[86%] h-[60%] text-white text-2xl -translate-x-1/2"
|
||||
:style="{
|
||||
borderColor: laserColor,
|
||||
backgroundImage: 'radial-gradient(circle, #165f2b 1px, transparent 1px)',
|
||||
backgroundSize: '20px 20px'
|
||||
}"
|
||||
></div>
|
||||
<img
|
||||
ref="revealImgRef"
|
||||
src="https://cdn.dribbble.com/userupload/15325964/file/original-25ae735b5d9255a4a31d3471fd1c346a.png?resize=1024x768&vertical=center"
|
||||
class="-top-1/2 z-2 absolute opacity-30 w-full pointer-events-none mix-blend-lighten"
|
||||
:style="{
|
||||
['--mx']: '-9999px',
|
||||
['--my']: '-9999px',
|
||||
WebkitMaskImage:
|
||||
'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)',
|
||||
maskImage:
|
||||
'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)',
|
||||
WebkitMaskRepeat: 'no-repeat',
|
||||
maskRepeat: 'no-repeat'
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSelect title="Example:" v-model="selectedExample" :options="exampleOptions" />
|
||||
<PreviewColor title="Color" v-model="laserColor" />
|
||||
<PreviewSlider title="Horizontal Sizing" :min="0.1" :max="2" :step="0.01" v-model="horizontalSizing" />
|
||||
<PreviewSlider title="Vertical Sizing" :min="0.1" :max="5" :step="0.1" v-model="verticalSizing" />
|
||||
<PreviewSlider title="Wisp Density" :min="0" :max="5" :step="0.1" v-model="wispDensity" />
|
||||
<PreviewSlider title="Wisp Speed" :min="1" :max="50" :step="0.5" v-model="wispSpeed" />
|
||||
<PreviewSlider title="Wisp Intensity" :min="0" :max="20" :step="0.1" v-model="wispIntensity" />
|
||||
<PreviewSlider title="Flow Speed" :min="0" :max="2" :step="0.02" v-model="flowSpeed" />
|
||||
<PreviewSlider title="Flow Strength" :min="0" :max="1" :step="0.01" v-model="flowStrength" />
|
||||
<PreviewSlider title="Fog Intensity" :min="0" :max="1" :step="0.01" v-model="fogIntensity" />
|
||||
<PreviewSlider title="Fog Scale" :min="0.1" :max="1" :step="0.01" v-model="fogScale" />
|
||||
<PreviewSlider title="Fog Fall Speed" :min="0" :max="2" :step="0.01" v-model="fogFallSpeed" />
|
||||
<PreviewSlider title="Decay" :min="0.5" :max="3" :step="0.01" v-model="decay" />
|
||||
<PreviewSlider title="Falloff Start" :min="0.5" :max="3" :step="0.01" v-model="falloffStart" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
<Dependencies :dependency-list="['three']" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="laserFlow" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="laserFlow.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
import { laserFlow } from '@/constants/code/Animations/laserFlowCode';
|
||||
import { ref, useTemplateRef } from 'vue';
|
||||
import CliInstallation from '../../components/code/CliInstallation.vue';
|
||||
import CodeExample from '../../components/code/CodeExample.vue';
|
||||
import Dependencies from '../../components/code/Dependencies.vue';
|
||||
import Customize from '../../components/common/Customize.vue';
|
||||
import PreviewColor from '../../components/common/PreviewColor.vue';
|
||||
import PreviewSelect from '../../components/common/PreviewSelect.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import PropTable from '../../components/common/PropTable.vue';
|
||||
import RefreshButton from '../../components/common/RefreshButton.vue';
|
||||
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
||||
import LaserFlow from '../../content/Animations/LaserFlow/LaserFlow.vue';
|
||||
|
||||
const { rerenderKey: key, forceRerender } = useForceRerender();
|
||||
|
||||
type ExampleKey = 'box' | 'basic';
|
||||
|
||||
const exampleOptions = [
|
||||
{ label: 'Box', value: 'box' },
|
||||
{ label: 'Basic', value: 'basic' }
|
||||
];
|
||||
|
||||
const containerRef = useTemplateRef('containerRef');
|
||||
const revealImgRef = useTemplateRef('revealImgRef');
|
||||
const selectedExample = ref<ExampleKey>('box');
|
||||
const laserColor = ref('#A0FFBC');
|
||||
const horizontalSizing = ref(0.5);
|
||||
const verticalSizing = ref(2.0);
|
||||
const wispDensity = ref(1);
|
||||
const wispSpeed = ref(15.0);
|
||||
const wispIntensity = ref(5.0);
|
||||
const flowSpeed = ref(0.35);
|
||||
const flowStrength = ref(0.25);
|
||||
const fogIntensity = ref(0.45);
|
||||
const fogScale = ref(0.3);
|
||||
const fogFallSpeed = ref(0.6);
|
||||
const decay = ref(1.1);
|
||||
const falloffStart = ref(1.2);
|
||||
|
||||
function handleMouseMove(e: MouseEvent) {
|
||||
const rect = (e.currentTarget as HTMLElement).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`);
|
||||
}
|
||||
}
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'horizontalBeamOffset',
|
||||
type: 'number',
|
||||
default: '0.1',
|
||||
description: 'Horizontal offset of the beam (0–1 of canvas width).'
|
||||
},
|
||||
{
|
||||
name: 'verticalBeamOffset',
|
||||
type: 'number',
|
||||
default: '0.0',
|
||||
description: 'Vertical offset of the beam (0–1 of canvas height).'
|
||||
},
|
||||
{
|
||||
name: 'horizontalSizing',
|
||||
type: 'number',
|
||||
default: '0.5',
|
||||
description: 'Horizontal sizing factor of the beam footprint.'
|
||||
},
|
||||
{
|
||||
name: 'verticalSizing',
|
||||
type: 'number',
|
||||
default: '2.0',
|
||||
description: 'Vertical sizing factor of the beam footprint.'
|
||||
},
|
||||
{ name: 'wispDensity', type: 'number', default: '1', description: 'Density of micro-streak wisps.' },
|
||||
{ name: 'wispSpeed', type: 'number', default: '15.0', description: 'Speed of wisp motion.' },
|
||||
{ name: 'wispIntensity', type: 'number', default: '5.0', description: 'Brightness of wisps.' },
|
||||
{ name: 'flowSpeed', type: 'number', default: '0.35', description: 'Speed of the beam’s flow modulation.' },
|
||||
{ name: 'flowStrength', type: 'number', default: '0.25', description: 'Strength of the beam’s flow modulation.' },
|
||||
{ name: 'fogIntensity', type: 'number', default: '0.45', description: 'Overall volumetric fog intensity.' },
|
||||
{ name: 'fogScale', type: 'number', default: '0.3', description: 'Spatial scale for the fog noise.' },
|
||||
{ name: 'fogFallSpeed', type: 'number', default: '0.6', description: 'Drift speed for the fog field.' },
|
||||
{
|
||||
name: 'mouseTiltStrength',
|
||||
type: 'number',
|
||||
default: '0.01',
|
||||
description: 'How much mouse x tilts the fog volume.'
|
||||
},
|
||||
{ name: 'mouseSmoothTime', type: 'number', default: '0.0', description: 'Pointer smoothing time (seconds).' },
|
||||
{ name: 'decay', type: 'number', default: '1.1', description: 'Beam decay shaping for sampling envelope.' },
|
||||
{
|
||||
name: 'falloffStart',
|
||||
type: 'number',
|
||||
default: '1.2',
|
||||
description: 'Falloff start radius used in inverse-square blending.'
|
||||
},
|
||||
{
|
||||
name: 'dpr',
|
||||
type: 'number',
|
||||
default: 'auto',
|
||||
description: 'Device pixel ratio override (defaults to window.devicePixelRatio).'
|
||||
},
|
||||
{ name: 'color', type: 'string', default: '#A0FFBC', description: 'Beam color (hex).' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<TabbedLayout>
|
||||
<template #preview>
|
||||
<div class="demo-container h-[600px]">
|
||||
<DomeGallery
|
||||
:key="rerenderKey"
|
||||
:fit="fit"
|
||||
:fit-basis="fitBasis"
|
||||
:min-radius="minRadius"
|
||||
:max-radius="maxRadius"
|
||||
:pad-factor="padFactor"
|
||||
:overlay-blur-color="overlayBlurColor"
|
||||
:max-vertical-rotation-deg="maxVerticalRotationDeg"
|
||||
:drag-sensitivity="dragSensitivity"
|
||||
:enlarge-transition-ms="enlargeTransitionMs"
|
||||
:segments="segments"
|
||||
:drag-dampening="dragDampening"
|
||||
:opened-image-width="openedImageWidth"
|
||||
:opened-image-height="openedImageHeight"
|
||||
:image-border-radius="imageBorderRadius"
|
||||
:opened-image-border-radius="openedImageBorderRadius"
|
||||
:grayscale="grayscale"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewSlider title="Fit" v-model="fit" :min="0.1" :max="1" :step="0.05" />
|
||||
|
||||
<PreviewSelect title="Fit Basis" v-model="fitBasis" :options="fitBasisOptions" />
|
||||
|
||||
<PreviewSlider title="Min Radius" v-model="minRadius" :min="200" :max="800" :step="50" />
|
||||
|
||||
<PreviewSlider title="Pad Factor" v-model="padFactor" :min="0.1" :max="0.5" :step="0.05" />
|
||||
|
||||
<PreviewColor title="Overlay Blur Color" v-model="overlayBlurColor" />
|
||||
|
||||
<PreviewSlider title="Max Vertical Rotation" v-model="maxVerticalRotationDeg" :min="0" :max="15" :step="1" />
|
||||
|
||||
<PreviewSlider title="Drag Sensitivity" v-model="dragSensitivity" :min="5" :max="50" :step="5" />
|
||||
|
||||
<PreviewSlider title="Enlarge Transition (ms)" v-model="enlargeTransitionMs" :min="200" :max="800" :step="50" />
|
||||
|
||||
<PreviewSlider title="Segments" v-model="segments" :min="20" :max="50" :step="5" />
|
||||
|
||||
<PreviewSlider title="Drag Dampening" v-model="dragDampening" :min="0.5" :max="5" :step="0.5" />
|
||||
|
||||
<PreviewText title="Opened Image Width" v-model="openedImageWidth" placeholder="e.g., 400px" />
|
||||
|
||||
<PreviewText title="Opened Image Height" v-model="openedImageHeight" placeholder="e.g., 400px" />
|
||||
|
||||
<PreviewText title="Image Border Radius" v-model="imageBorderRadius" placeholder="e.g., 30px" />
|
||||
|
||||
<PreviewText title="Opened Image Border Radius" v-model="openedImageBorderRadius" placeholder="e.g., 30px" />
|
||||
|
||||
<PreviewSwitch title="Grayscale" v-model="grayscale" />
|
||||
</Customize>
|
||||
|
||||
<PropTable :data="propData" />
|
||||
|
||||
<Dependencies :dependency-list="[]" />
|
||||
</template>
|
||||
|
||||
<template #code>
|
||||
<CodeExample :code-object="domeGallery" />
|
||||
</template>
|
||||
|
||||
<template #cli>
|
||||
<CliInstallation :command="domeGallery.cli" />
|
||||
</template>
|
||||
</TabbedLayout>
|
||||
</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 PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import PreviewColor from '../../components/common/PreviewColor.vue';
|
||||
import PreviewSelect from '../../components/common/PreviewSelect.vue';
|
||||
import PreviewText from '../../components/common/PreviewText.vue';
|
||||
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
|
||||
import DomeGallery from '../../content/Components/DomeGallery/DomeGallery.vue';
|
||||
import { domeGallery } from '@/constants/code/Components/domeGalleryCode';
|
||||
import { useForceRerender } from '@/composables/useForceRerender';
|
||||
|
||||
const fit = ref(0.8);
|
||||
const fitBasis = ref<'auto' | 'min' | 'max' | 'width' | 'height'>('auto');
|
||||
const minRadius = ref(600);
|
||||
const maxRadius = ref(Infinity);
|
||||
const padFactor = ref(0.25);
|
||||
const overlayBlurColor = ref('#060010');
|
||||
const maxVerticalRotationDeg = ref(0);
|
||||
const dragSensitivity = ref(20);
|
||||
const enlargeTransitionMs = ref(300);
|
||||
const segments = ref(34);
|
||||
const dragDampening = ref(2);
|
||||
const openedImageWidth = ref('250px');
|
||||
const openedImageHeight = ref('350px');
|
||||
const imageBorderRadius = ref('30px');
|
||||
const openedImageBorderRadius = ref('30px');
|
||||
const grayscale = ref(true);
|
||||
|
||||
const { rerenderKey } = useForceRerender();
|
||||
|
||||
const fitBasisOptions = [
|
||||
{ label: 'Auto', value: 'auto' },
|
||||
{ label: 'Minimum', value: 'min' },
|
||||
{ label: 'Maximum', value: 'max' },
|
||||
{ label: 'Width', value: 'width' },
|
||||
{ label: 'Height', value: 'height' }
|
||||
];
|
||||
|
||||
const propData = [
|
||||
{
|
||||
name: 'images',
|
||||
type: 'Array<string | { src: string; alt?: string }>',
|
||||
default: 'DEFAULT_IMAGES',
|
||||
description: 'Array of images to display. Can be URLs or objects with src and alt properties.'
|
||||
},
|
||||
{
|
||||
name: 'fit',
|
||||
type: 'number',
|
||||
default: '0.5',
|
||||
description: 'Size factor for dome radius relative to container dimensions.'
|
||||
},
|
||||
{
|
||||
name: 'fitBasis',
|
||||
type: '"auto" | "min" | "max" | "width" | "height"',
|
||||
default: '"auto"',
|
||||
description: 'Determines which container dimension to use as basis for dome sizing.'
|
||||
},
|
||||
{
|
||||
name: 'minRadius',
|
||||
type: 'number',
|
||||
default: '600',
|
||||
description: 'Minimum dome radius in pixels.'
|
||||
},
|
||||
{
|
||||
name: 'maxRadius',
|
||||
type: 'number',
|
||||
default: 'Infinity',
|
||||
description: 'Maximum dome radius in pixels.'
|
||||
},
|
||||
{
|
||||
name: 'padFactor',
|
||||
type: 'number',
|
||||
default: '0.25',
|
||||
description: 'Padding factor for viewer area around the dome.'
|
||||
},
|
||||
{
|
||||
name: 'overlayBlurColor',
|
||||
type: 'string',
|
||||
default: '"#060010"',
|
||||
description: 'Color used for blur overlay and edge fading effects.'
|
||||
},
|
||||
{
|
||||
name: 'maxVerticalRotationDeg',
|
||||
type: 'number',
|
||||
default: '5',
|
||||
description: 'Maximum vertical rotation angle in degrees for drag interactions.'
|
||||
},
|
||||
{
|
||||
name: 'dragSensitivity',
|
||||
type: 'number',
|
||||
default: '20',
|
||||
description: 'Sensitivity of drag interactions. Lower values require more movement.'
|
||||
},
|
||||
{
|
||||
name: 'enlargeTransitionMs',
|
||||
type: 'number',
|
||||
default: '300',
|
||||
description: 'Duration of image enlargement animation in milliseconds.'
|
||||
},
|
||||
{
|
||||
name: 'segments',
|
||||
type: 'number',
|
||||
default: '35',
|
||||
description: 'Number of grid segments for image placement on the dome.'
|
||||
},
|
||||
{
|
||||
name: 'dragDampening',
|
||||
type: 'number',
|
||||
default: '2',
|
||||
description: 'Inertia damping factor for momentum after drag release.'
|
||||
},
|
||||
{
|
||||
name: 'openedImageWidth',
|
||||
type: 'string',
|
||||
default: '"250px"',
|
||||
description: 'Width of enlarged image when opened.'
|
||||
},
|
||||
{
|
||||
name: 'openedImageHeight',
|
||||
type: 'string',
|
||||
default: '"350px"',
|
||||
description: 'Height of enlarged image when opened.'
|
||||
},
|
||||
{
|
||||
name: 'imageBorderRadius',
|
||||
type: 'string',
|
||||
default: '"30px"',
|
||||
description: 'Border radius for image tiles on the dome.'
|
||||
},
|
||||
{
|
||||
name: 'openedImageBorderRadius',
|
||||
type: 'string',
|
||||
default: '"30px"',
|
||||
description: 'Border radius for enlarged image when opened.'
|
||||
},
|
||||
{
|
||||
name: 'grayscale',
|
||||
type: 'boolean',
|
||||
default: 'true',
|
||||
description: 'Whether to apply grayscale filter to images.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
Reference in New Issue
Block a user