Wavy Lines bg

Simple, unassuming lines pulse with a minimalist rhythm, adding a touch of poetic flair to your website.

Inspiration

Usage Examples

Basic Usage

Besides its overall effect, it can also interact with the mouse.

Effect

nonewindwavesorogeny

Mouse Interaction

smearblack-holewhite-holeripple

View Example Source Code

<template>
  <div class="w-full flex flex-col gap-4">
    <bg-wavy-lines
      :effect
      :mouse-interaction="{ type: mouseInteractionType }"
      class="h-full w-full touch-none border border-gray-300"
    >
      <div class="absolute left-2 top-2 opacity-10">
        <!-- {{ fps }} -->
      </div>
    </bg-wavy-lines>

    <div class="flex gap-6">
      <select-stepper
        v-model="effect"
        :label="t('effectLabel')"
        class="w-full"
        :options
      />

      <select-stepper
        v-model="mouseInteractionType"
        :label="t('mouseInteractionLabel')"
        class="w-full"
        :options="mouseInteractionTypeOptions"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ComponentProps } from 'vue-component-type-helpers'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import SelectStepper from '../../select-stepper.vue'
import BgWavyLines from '../bg-wavy-lines.vue'

type Props = ComponentProps<typeof BgWavyLines>

const effect = ref<Props['effect']>('none')
const options: NonNullable<Props['effect']>[] = [
  'none',
  'wind',
  'waves',
  'orogeny',
]

type MouseInteractionType = NonNullable<Props['mouseInteraction']>['type']

const mouseInteractionType = ref<MouseInteractionType>('smear')
const mouseInteractionTypeOptions: MouseInteractionType[] = [
  'smear',
  'black-hole',
  'white-hole',
  'ripple',
]

const { t } = useI18n()
</script>

How it Works

Tried to directly use the canvas API to draw generative art.

Originally wanted to try GLSL, but aside from it being quite arcane, there were also many limitations to implementing interactivity.

Ended up going back to the canvas API. (´･ω･`)

Noise Algorithm

The natural movement effect of the lines is based on the Simplex Noise algorithm.

Noise algorithms are mainly used to generate random values that have a certain continuity, unlike typical random values (e.g., Math.random) which are discrete.

This characteristic allows their values to be used to simulate some natural effects, like terrain, clouds, water waves, etc.

However, due to the complexity of natural phenomena, noise algorithms also have many variations, such as Worley Noise, Fractal Noise, Turbulence Noise, and so on, which are quite interesting. ◝( •ω• )◟

Source Code

Component

、Examples

API

Props

type MouseEffect = {
  type: 'smear';
  radius?: number;
  force?: number;
} | {
  type: 'black-hole';
  radius?: number;
  gravity?: number;
} | {
  type: 'white-hole';
  radius?: number;
  force?: number;
} | {
  /** 點擊後會產生水波 */
  type: 'ripple';
  speed?: number;
  maxRadius?: number;
  amplitude?: number;
}

interface Props {
  /** 線條間距 */
  lineGap?: number;

  /** 線條之點間距 */
  pointGap?: number;

  /** 線條顏色 */
  lineColor?: string;

  /** 各種效果。例：風吹、波動等等 */
  effect?: 'none' | 'wind' | 'waves' | 'orogeny';

  /** 滑鼠互動效果 */
  mouseInteraction?: MouseEffect;
}