Crystalline Growth

Shaders

About

"Crystalline Growth" effect. It uses a 3D rendering technique called raymarching to create an animated, abstract scene of growing and rotating crystalline structures. The UI panel allows you to control the growth speed, the complexity of the shapes, the color scheme, and the position of the virtual light source, giving you a wide range of creative possibilities.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Crystalline Growth to your project and fits it to your theme.

Code

How Crystalline Growth is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React, { useState } from 'react';
import { InteractiveShader, ControlsPanel } from "@/components/ui/crystalline-growth";

export default function DemoOne() {
  // State for shader parameters, controlled by UI sliders.
  const [params, setParams] = useState({
    hue: 180.0,
    speed: 0.3,
    shape: 0.5,
  });

  const handleParamChange = (param) => (e) => {
    setParams(p => ({ ...p, [param]: parseFloat(e.target.value) }));
  };

  return (
    <div className="relative w-full h-screen bg-black font-sans antialiased overflow-hidden">
      <InteractiveShader {...params} />
      <ControlsPanel params={params} onParamChange={handleParamChange} />
    </div>
  );
}