The prompt that made it
as published# ANOMALOUS MATTER HERO
YOU ARE GIVEN A TASK TO INTEGRATE AN EXISTING REACT COMPONENT IN THE CODEBASE
THE CODEBASE SHOULD SUPPORT:
- SHADCN PROJECT STRUCTURE
- TAILWIND CSS
- TYPESCRIPT
IF IT DOESN'T, PROVIDE INSTRUCTIONS ON HOW TO SETUP PROJECT VIA SHADCN CLI, INSTALL TAILWIND OR TYPESCRIPT.
DETERMINE THE DEFAULT PATH FOR COMPONENTS AND STYLES.
IF DEFAULT PATH FOR COMPONENTS IS NOT /COMPONENTS/UI, PROVIDE INSTRUCTIONS ON WHY IT'S IMPORTANT TO CREATE THIS FOLDER
COPY-PASTE THIS COMPONENT TO /COMPONENTS/UI FOLDER:
```tsx
anomalous-matter-hero.tsx
import React, { useRef, useEffect, Suspense } from "react";
import * as THREE from "three";
export function GenerativeArtScene() {
const mountRef = useRef(null);
const lightRef = useRef(null);
useEffect(() => {
const currentMount = mountRef.current;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
currentMount.clientWidth / currentMount.clientHeight,
0.1,
1000
);
camera.position.z = 3;
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
currentMount.appendChild(renderer.domElement);
const geometry = new THREE.IcosahedronGeometry(1.2, 64);
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
pointLightPos: { value: new THREE.Vector3(0, 0, 5) },
color: { value: new THREE.Color("hsl(var(--sky-300))") },
},
vertexShader: ` uniform float time;
varying vec3 vNormal;
varying vec3 vPosition;
// Perlin Noise function
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
float snoise(vec3 v) {
const vec2 C = vec2(1.0/6.0, 1.0/3.0);
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
vec3 i = floor(v + dot(v, C.yyy));
vec3 x0 = v - i + dot(i, C.xxx);
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min(g.xyz, l.zxy);
vec3 i2 = max(g.xyz, l.zxy);
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy;
vec3 x3 = x0 - D.yyy;
i = mod289(i);
vec4 p = permute(permute(permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0));
float n_ = 0.142857142857;
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_);
vec4 x = x_ * ns.x + ns.yyyy;
vec4 y = y_ * ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4(x.xy, y.xy);
vec4 b1 = vec4(x.zw, y.zw);
vec4 s0 = floor(b0) * 2.0 + 1.0;
vec4 s1 = floor(b1) * 2.0 + 1.0;
vec4 sh = -step(h, vec4(0.0));
vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
vec3 p0 = vec3(a0.xy, h.x);
vec3 p1 = vec3(a0.zw, h.y);
vec3 p2 = vec3(a1.xy, h.z);
vec3 p3 = vec3(a1.zw, h.w);
vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
m = m * m;
return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
}
void main() {
vNormal = normal;
vPosition = position;
float displacement = snoise(position * 2.0 + time * 0.5) * 0.2;
vec3 newPosition = position + normal * displacement;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}`, // (same GLSL code as before)
fragmentShader: ` uniform vec3 color;
uniform vec3 pointLightPosition;
varying vec3 vNormal;
varying vec3 vPosition;
void main() {
vec3 normal = normalize(vNormal);
vec3 lightDir = normalize(pointLightPosition - vPosition);
float diffuse = max(dot(normal, lightDir), 0.0);
// Fresnel effect for the glow
float fresnel = 1.0 - dot(normal, vec3(0.0, 0.0, 1.0));
fresnel = pow(fresnel, 2.0);
vec3 finalColor = color * diffuse + color * fresnel * 0.5;
gl_FragColor = vec4(finalColor, 1.0);
}`, // (same GLSL code as before)
wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(0, 0, 5);
lightRef.current = pointLight;
scene.add(pointLight);
let frameId;
const animate = (t) => {
material.uniforms.time.value = t * 0.0003;
mesh.rotation.y += 0.0005;
mesh.rotation.x += 0.0002;
renderer.render(scene, camera);
frameId = requestAnimationFrame(animate);
};
animate(0);
const handleResize = () => {
camera.aspect = currentMount.clientWidth / currentMount.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
};
const handleMouseMove = (e) => {
const x = (e.clientX / window.innerWidth) * 2 - 1;
const y = -(e.clientY / window.innerHeight) * 2 + 1;
const vec = new THREE.Vector3(x, y, 0.5).unproject(camera);
const dir = vec.sub(camera.position).normalize();
const dist = -camera.position.z / dir.z;
const pos = camera.position.clone().add(dir.multiplyScalar(dist));
lightRef.current.position.copy(pos);
material.uniforms.pointLightPos.value = pos;
};
window.addEventListener("resize", handleResize);
window.addEventListener("mousemove", handleMouseMove);
return () => {
cancelAnimationFrame(frameId);
window.removeEventListener("resize", handleResize);
window.removeEventListener("mousemove", handleMouseMove);
currentMount.removeChild(renderer.domElement);
};
}, []);
return <div ref={mountRef} className="absolute inset-0 w-full h-full z-0" />;
}
export function AnomalousMatterHero({
title = "Observation Log: Anomaly 7",
subtitle = "Matter in a state of constant, beautiful flux.",
description = "A new form of digital existence has been observed. It responds to stimuli, changes form, and exudes an unknown energy. Further study is required.",
}) {
return (
<section
role="banner"
className="relative w-full h-screen bg-[hsl(var(--background))] text-[hsl(var(--foreground))] overflow-hidden"
>
<Suspense fallback={<div className="w-full h-full bg-[hsl(var(--background))]" />}>
<GenerativeArtScene />
</Suspense>
<div className="absolute inset-0 bg-gradient-to-t from-[hsl(var(--background))] via-[hsl(var(--background))/70] to-transparent z-10" />
<div className="relative z-20 flex flex-col items-center justify-end h-full pb-20 md:pb-32 text-center">
<div className="max-w-3xl px-4 animate-fade-in-long">
<h1 className="text-sm font-mono tracking-widest text-[hsl(var(--sky-300)/80)] uppercase">
{title}
</h1>
<p className="mt-4 text-3xl md:text-5xl font-bold leading-tight">
{subtitle}
</p>
<p className="mt-6 max-w-xl mx-auto text-base leading-relaxed text-[hsl(var(--gray-300)/80)]">
{description}
</p>
</div>
</div>
</section>
);
}
demo.tsx
import React from "react";
import { AnomalousMatterHero } from "@/components/ui/anomalous-matter-hero";
function App() {
return (
<AnomalousMatterHero
title="Launch Sequence: Anomaly 12"
subtitle="Energy dances along unseen frontiers."
description="This demo shows how to override the default copy and integrate hero into a page layout."
/>
);
}
export default App;
```
INSTALL NPM DEPENDENCIES:
```bash
three
```
EXTEND EXISTING TAILWIND 4 INDEX.CSS WITH THIS CODE (OR IF PROJECT USES TAILWIND 3, EXTEND TAILWIND.CONFIG.JS OR GLOBALS.CSS):
```css
@import "tailwindcss";
@import "tw-animate-css";
:root {
--background: 0, 0%, 0%;
--foreground: 0, 100%, 100%;
--sky-300: 203, 92%, 53%;
--gray-300: 0, 0%, 70%;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
```
## IMPLEMENTATION GUIDELINES
1. ANALYZE THE COMPONENT STRUCTURE AND IDENTIFY ALL REQUIRED DEPENDENCIES
2. REVIEW THE COMPONENT'S ARGUMENS AND STATE
3. IDENTIFY ANY REQUIRED CONTEXT PROVIDERS OR HOOKS AND INSTALL THEM
4. QUESTIONS TO ASK
- WHAT DATA/PROPS WILL BE PASSED TO THIS COMPONENT?
- ARE THERE ANY SPECIFIC STATE MANAGEMENT REQUIREMENTS?
- ARE THERE ANY REQUIRED ASSETS (IMAGES, ICONS, ETC.)?
- WHAT IS THE EXPECTED RESPONSIVE BEHAVIOR?
- WHAT IS THE BEST PLACE TO USE THIS COMPONENT IN THE APP?
## STEPS TO INTEGRATE
0. COPY PASTE ALL THE CODE ABOVE IN THE CORRECT DIRECTORIES
1. INSTALL EXTERNAL DEPENDENCIES
2. FILL IMAGE ASSETS WITH UNSPLASH STOCK IMAGES YOU KNOW EXIST
3. USE LUCIDE-REACT ICONS FOR SVGS OR LOGOS IF COMPONENT REQUIRES THEMAdds a render step. Works best with the HyperFrames or Remotion skills installed. Free, no sign-up.
Prompt by @pulkitxm. Prompts belong to their creators.
