Shaders
header.lightDarkMode D
Gallery

Flowing Ribbon 3

Flowing Ribbon

A dynamic 3D ribbon shader effect featuring a twisted, flowing form that spirals diagonally across the composition. The ribbon has a smooth, glossy surface with high reflectivity, creating bright specular highlights along its edges. The primary color gradient transitions smoothly from vibrant green (#6ad47f) at the upper portions to deep electric blue (#3e40e6) at the lower sections, with cyan and turquoise intermediate tones creating a seamless color flow. The ribbon appears to have significant thickness and curvature, with a twist angle of 69 degrees creating a dynamic helical motion. Fine white lines overlay the surface in a falling pattern with a linear dodge blend mode, creating luminous streaks that enhance the sense of movement and energy. The background is a soft, muted lavender-gray (#dad6ff) with subtle studio lighting that creates gentle shadows and depth. The overall atmosphere is modern, sleek, and energetic, with a sense of fluid motion and technological sophistication. Film grain is subtly applied at 0.3 opacity, adding a slight texture to the otherwise smooth surfaces. The lighting is positioned to emphasize the 3D form's dimensionality, with ambient intensity at 78 creating a well-lit, professional appearance.

Code

vue
<script setup lang="ts">
import {
  Shader,
  FallingLines,
  FilmGrain,
  Form3D,
  StudioBackground,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <StudioBackground :ambient-intensity="78" :brightness="100" :center="{ x: 0.75, y: 1 }" color="#dad6ff" :fill-intensity="0" :key-intensity="0" :light-target="0" :wall-curvature="57" />
    <Form3D :center="{ x: 0.27, y: 0.67 }" :glossiness="200" :lighting="197" :shape3d="{ type: 'ribbon', angle: 294, twist: 69, width: 100, thickness: 200, seed: 0 }" :speed="2" :zoom="78">
      <Swirl color-a="#6ad47f" color-b="#3e40e6" color-space="hsl" :detail="1.9" />
      <FallingLines :angle="0" blend-mode="linearDodge" color-b="#000000" :density="12" :stroke-width="0.1" :trail-length="0.72" />
    </Form3D>
    <FilmGrain :strength="0.3" />
  </Shader>
</template>