Flowing Ribbon 5
Flowing RibbonA sophisticated 3D shader effect featuring a large curved ribbon form dominating the composition. The ribbon has a smooth, organic surface with subtle curvature, positioned in the lower-left to center area of the frame. The primary color palette transitions from deep blue (#0c26e3) on the left side to soft purple and magenta tones (#b17fc2) toward the right, creating a smooth gradient across the form's surface. The background is a soft, muted lavender-gray (#dad6ff) with gentle vignetting that creates depth. Fine white lines with a linear-dodge blend mode streak across the ribbon's surface at diagonal angles, creating a sense of motion and energy. These lines have a trail effect with approximately 72% length, appearing to flow downward and leftward. The overall lighting is soft and diffused with high ambient intensity (78%), creating a studio-like environment with subtle shadows that enhance the 3D form's dimensionality. A fine film grain texture overlays the entire composition at 30% strength, adding subtle texture and photographic quality. The ribbon's glossiness is high (200), giving it a polished, reflective appearance. The composition has a modern, minimalist aesthetic with a cool color temperature and a sense of calm, sophisticated motion.
Code
<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.5, y: 1 }" :glossiness="200" :lighting="197" :shape3d="{ type: 'ribbon', angle: 0, twist: 24, width: 100, thickness: 500, seed: 0 }" :speed="2" :zoom="78">
<Swirl color-a="#b17fc2" color-b="#0c26e3" 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>