Flowing Dots

Open in editor

A dynamic digital visualization featuring a flowing, curved ribbon or wave pattern composed of thousands of small circular dots arranged in a grid structure. The pattern flows diagonally from the lower left to upper right, creating an elegant S-curve or spiral motion. The dots transition through a vibrant color spectrum: starting with warm orange and yellow tones in the lower left, transitioning through lime-green and bright green in the middle sections, and culminating in cyan and light-blue hues in the upper right. The background is a deep dark-blue to nearly black gradient, creating strong contrast that makes the glowing dots appear luminous and three-dimensional. The dots vary in size and opacity, with the brightest, most saturated colors concentrated along the central curve, while the edges fade to smaller, dimmer dots that dissipate into the dark background. The overall effect suggests fluid motion, energy flow, or particle dynamics with a smooth, organic quality despite the geometric grid structure. The twinkle effect adds subtle shimmer and life to the visualization. The chromatic separation creates subtle color fringing along the edges of the curve, enhancing the sense of depth and digital distortion.

Code

vue

<script setup lang="ts">
import {
  Shader,
  ChromaFlow,
  CursorRipples,
  DotGrid,
  LinearGradient
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <DotGrid id="idmlsai28917usa8l1j" :density="40" :dot-size="{ type: 'map', source: 'idmlsaoh7xdy8aayjbd', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0 }" :twinkle="0.9" :visible="false" />
    <ChromaFlow id="idmlsaoh7xdy8aayjbd" :intensity="1.4" :radius="2.9" :visible="false" />
    <LinearGradient color-a="#0d284d" color-b="#0b051a" color-space="hsl" :end="{ x: 1, y: 0 }" :start="{ x: 0, y: 1 }" />
    <LinearGradient color-a="#c0096f" color-b="#32dffa" color-space="hsl" :end="{ x: 1, y: 0 }" mask-source="idmlsai28917usa8l1j" :start="{ x: 0, y: 1 }" />
    <CursorRipples />
  </Shader>
</template>