Shaders
header.lightDarkMode D
Gallery

Flowing Ribbon 4

Flowing Ribbon

A sleek, modern 3D ribbon form dominates the composition, positioned horizontally across the center of the frame. The ribbon features a smooth, curved surface with a subtle twist (22-degree rotation) that creates dynamic visual flow. The primary color palette transitions from vibrant magenta (#ff0db4) on the lower-left to soft pink (#f89eff) on the upper-right, with a glossy, reflective surface quality (glossiness value of 200) that catches light realistically. Fine white horizontal lines traverse the ribbon's surface, created by the FallingLines effect with a linear dodge blend mode, adding a sense of motion and technical sophistication. The background is a soft, muted lavender-gray (#dad6ff) with subtle studio lighting that creates a curved wall effect (57% curvature). The ambient lighting is warm and diffused (78% intensity), creating soft shadows and highlights that enhance the 3D form's dimensionality. A subtle film grain texture (0.3 strength) overlays the entire composition, adding a cinematic quality. The overall mood is contemporary and elegant, with a balance between organic flowing forms and geometric precision. The lighting setup suggests a professional studio environment with key, fill, and ambient light sources creating depth and visual interest.

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 :glossiness="200" :lighting="197" :shape3d="{ type: 'ribbon', angle: 0, twist: 22, width: 70, thickness: 200, seed: 0 }" :speed="2" :zoom="78">
      <Swirl color-a="#f89eff" color-b="#ff0db4" color-space="oklab" :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>