Codrops 원본
Origami: 12 Free Animated 3D Objects
섹션 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
.eslintrc.cjs
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parser: "@typescript-eslint/parser",
plugins: ["react-refresh"],
rules: {
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
"@typescript-eslint/no-unused-vars": "off",
},
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Origami: 12+ 3D Motion Graphics | Codrops</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
함께 쓰는 파일 25개 보기
src/App.tsx
import { View } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { ReactNode, useEffect } from "react";
import { Hero } from "./components/Hero";
import { Item1 } from "./grid/Item1";
import { Item10 } from "./grid/Item10";
import { Item11 } from "./grid/Item11";
import { Item12 } from "./grid/Item12";
import { Item2 } from "./grid/Item2";
import { Item3 } from "./grid/Item3";
import { Item4 } from "./grid/Item4";
import { Item5 } from "./grid/Item5";
import { Item6 } from "./grid/Item6";
import { Item7 } from "./grid/Item7";
import { Item8 } from "./grid/Item8";
import { Item9 } from "./grid/Item9";
const Wrapper = ({ name, children }: { name: string; children: ReactNode }) => {
return (
<div className="relative rounded-md cursor-pointer bg-white/10 card p-[1px]">
<View className="flex z-[2] bg-[#171717] aspect-square relative rounded-t-md">
{children}
</View>
<div className="relative z-20 flex items-center mt-[1px] justify-between w-full px-4 py-2 bg-[#171717] rounded-b-md">
<span className="w-1 h-1 rounded-full bg-white/20"></span>
<span className="">{name}</span>
<span className="w-1 h-1 rounded-full bg-white/20"></span>
</div>
<div
className="absolute top-0 left-0 w-full h-full transition-opacity duration-500 rounded-md opacity-0 group-hover:opacity-100 z-1"
style={{
background: `radial-gradient(400px circle at var(--mouse-x) var(--mouse-y),rgba(255, 255, 255, 0.3),transparent 40%)`,
}}
></div>
</div>
);
};
function App() {
const items = [
{ component: Item1, name: "Rings" },
{ component: Item2, name: "Loop" },
{ component: Item3, name: "Coins" },
{ component: Item4, name: "Core" },
{ component: Item5, name: "Rubik" },
{ component: Item6, name: "Travel" },
{ component: Item7, name: "Stagger" },
{ component: Item8, name: "Balance" },
{ component: Item9, name: "Pulse" },
{ component: Item10, name: "Pie" },
{ component: Item11, name: "Newton's Cradle" },
{ component: Item12, name: "Arrows" },
];
useEffect(() => {
const cards = document.querySelectorAll<HTMLDivElement>(".card");
const handlePointerMove = (e: PointerEvent) => {
cards.forEach((card) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
card.style.setProperty("--mouse-x", `${x}px`);
card.style.setProperty("--mouse-y", `${y}px`);
});
};
document
.querySelector<HTMLDivElement>("[data-gird]")
?.addEventListener("pointermove", handlePointerMove);
return () => {
document
.querySelector<HTMLDivElement>("[data-gird]")
?.removeEventListener("pointermove", handlePointerMove);
};
}, []);
return (
<div className="min-h-screen text-white bg-[#0c0c0c] select-none background">
<div className="container p-5 pb-20 mx-auto ">
<Hero></Hero>
<div className="relative mt-5 overflow-hidden">
<div
className="grid h-full gap-5 overflow-hidden group grid-clos-1 md:grid-cols-2 lg:grid-cols-4"
data-gird
>
{items.map((item, index) => (
<Wrapper key={index} name={item.name}>
<item.component />
</Wrapper>
))}
</div>
<div className="fixed top-0 left-0 z-20 w-full h-screen pointer-events-none ">
<Canvas
camera={{
zoom: 0.8,
}}
className="fixed"
eventSource={document.getElementById("root")!}
>
<View.Port />
</Canvas>
</div>
</div>
</div>
</div>
);
}
export default App;
src/components/Hero.tsx
import { useStore } from "../store/useStore";
const Link = ({
href,
children,
}: {
href: string;
children: React.ReactNode;
}) => {
return (
<a
href={href}
className="hover:underline underline-offset-2"
target="_blank"
>
{children}
</a>
);
};
export const Hero = () => {
const [index, setIndex] = useStore((state) => [state.index, state.setIndex]);
return (
<div className="w-full space-y-3 sm:space-y-5 border flex flex-col justify-between from-[#111111] to-[#181818] bg-gradient-to-t border-white/10 rounded-md p-5 md:p-10">
<div className="flex items-center justify-between">
<div className="text-md sm:text-xl lg:text-2xl">
12+ 3D Motion Graphics
</div>
<div className="flex items-center ">
<div className="hidden text-xs text-white/60 md:block">
VARIATIONS
</div>
<div className="flex ml-4 space-x-2">
{Array.from({ length: 3 }).map((_, key) => {
return (
<div
key={key}
className={`${
key === index
? "text-white/100 bg-white/20"
: "text-white/60 bg-white/5 "
} flex items-center justify-center rounded-sm w-6 h-6 md:w-8 md:h-8 transition-colors duration-300 cursor-pointer bg-white/10 hover:bg-white/15 hover:text-white`}
onClick={() => {
setIndex(key);
}}
>
<span className="text-xs md:text-sm">{key + 1}</span>
</div>
);
})}
</div>
</div>
</div>
<div className="text-5xl text-transparent sm:text-6xl zen-dots-regular md:text-8xl lg:text-9xl from-[#828282] to-white bg-gradient-to-l bg-clip-text ">
ORIGAMI
</div>
<div className="flex flex-col justify-around text-xs border lg:flex-row md:text-s border-white/10">
<div className="px-2 py-2 sm:px-4">
©️ 2024 <Link href="https://x.com/codrops">Codrops</Link> & <Link href="https://x.com/deadrabbbbit">deadrabbbbit</Link>
</div>
<div className="flex justify-between flex-grow px-2 py-2 sm:px-4 lg:justify-around border-white/10 md:border-x">
<Link href="https://tympanus.net/codrops/demos/?tag=webgl">webgl</Link>
<div className="hidden sm:inline-block">▲</div>
<Link href="https://tympanus.net/codrops/demos/?tag=three-js">three.js</Link>
<div className="hidden sm:inline-block">▲</div>
<Link href="https://tympanus.net/codrops/demos/?tag=react-three-fiber">R3F</Link>
<div className="hidden sm:inline-block">▲</div>
<Link href="https://tympanus.net/codrops/demos/?tag=3d">3D</Link>
</div>
<div className="flex px-2 py-2 space-x-4 sm:px-4 lg:justify-around">
<Link href="https://github.com/d3adrabbit/origami">GitHub</Link>
<Link href="https://tympanus.net/codrops/?p=79782">Article</Link>
</div>
</div>
</div>
);
};
src/grid/Item1.tsx
import { Center } from "@react-three/drei";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { useCallback, useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
export const Item1 = () => {
const refList = useRef<THREE.Mesh[]>([]);
const getRef = useCallback((mesh: THREE.Mesh) => {
if (mesh && !refList.current.includes(mesh)) {
refList.current.push(mesh);
}
}, []);
useGSAP(() => {
if (refList.current.length === 0) return;
gsap
.timeline({
repeat: -1,
repeatDelay: 0.5,
})
.to(
refList.current.map((item) => item.rotation),
{
y: `+=${Math.PI * 2}`,
x: `-=${Math.PI * 2}`,
duration: 1.5,
stagger: {
each: 0.15,
},
}
);
}, []);
return (
<Center>
<group>
{Array.from({ length: 4 }).map((_, index) => {
return (
<mesh key={index} ref={getRef}>
<torusGeometry args={[(index + 1) * 0.5, 0.1]}></torusGeometry>
<CustomMaterial></CustomMaterial>
</mesh>
);
})}
</group>
</Center>
);
};
src/grid/Item10.tsx
import { useGSAP } from "@gsap/react";
import { Center, Instance, Instances } from "@react-three/drei";
import gsap from "gsap";
import { useCallback, useMemo, useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
export const Item10 = () => {
const refList = useRef<THREE.Group[]>([]);
const geometry = useMemo(() => {
const shape = new THREE.Shape();
// Outer arc
shape.absarc(0, 0, 1, 0, Math.PI / 2, false);
shape.lineTo(Math.cos(Math.PI / 2) * 0.5, Math.sin(Math.PI / 2) * 0.5);
// Inner arc
shape.absarc(0, 0, 0.2, Math.PI / 2, 0, true);
shape.lineTo(1, 0);
const extrudeSettings = {
steps: 1,
depth: 0.3,
bevelEnabled: false,
};
return new THREE.ExtrudeGeometry(shape, extrudeSettings);
}, []);
const getRef = useCallback((mesh: THREE.Group) => {
if (mesh && !refList.current.includes(mesh)) {
refList.current.push(mesh);
}
}, []);
useGSAP(() => {
if (refList.current.length === 0) return;
gsap
.timeline({
repeat: -1,
repeatDelay: 0.5,
})
.to(
refList.current.map((item) => item.position),
{
x: (index) => {
return `+=${Math.sin((index / 4) * 2 * Math.PI) * 0.5}`;
},
z: (index) => {
return `+=${Math.cos((index / 4) * 2 * Math.PI) * 0.5}`;
},
duration: 1.5,
ease: "power1.out",
}
)
.to(
refList.current.map((item) => item.rotation),
{
z: `+=${Math.PI}`,
duration: 2,
},
0
)
.to(
refList.current.map((item) => item.position),
{
x: 0,
z: 0,
duration: 1.5,
},
1
);
}, []);
return (
<Center scale={1.6}>
<group rotation={[Math.PI / 2, 0, 0]}>
<group>
<Instances geometry={geometry}>
<CustomMaterial side={THREE.DoubleSide}></CustomMaterial>
{Array.from({ length: 4 }).map((_, index) => {
return (
<group
ref={getRef}
key={index}
rotation={[0, (index * Math.PI) / 2, 0]}
>
<Instance rotation={[Math.PI / 2, 0, 0]} />
</group>
);
})}
</Instances>
</group>
</group>
</Center>
);
};
src/grid/Item11.tsx
import { Instance, Instances } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { useCallback, useMemo, useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
// Inspired by https://www.shadertoy.com/view/sdsXWr
export const Item11 = () => {
const refList = useRef<THREE.Mesh[]>([]);
const getRef = useCallback((mesh: THREE.Mesh) => {
if (mesh && !refList.current.includes(mesh)) {
refList.current.push(mesh);
}
}, []);
const rotate = useMemo(
() => (a: number) => {
const s = Math.sin(a);
const c = Math.cos(a);
return new THREE.Matrix3().set(c, -s, 0, s, c, 0, 0, 0, 1);
},
[]
);
useFrame(({ clock }) => {
if (refList.current.length === 0) return;
const time = clock.getElapsedTime();
const angle = Math.sin(time * 4);
const angle1 = Math.min(0, angle * 0.5);
const angle5 = Math.max(0, angle * 0.5);
const positions = [
{
sphere: refList.current[0],
vector: new THREE.Vector3(-4, -4, 0),
angle: angle1,
},
{
sphere: refList.current[1],
vector: new THREE.Vector3(-2, -4, 0),
angle: (angle + angle1) * 0.05,
},
{
sphere: refList.current[2],
vector: new THREE.Vector3(0, -4, 0),
angle: angle5 * 0.05,
},
{
sphere: refList.current[3],
vector: new THREE.Vector3(2, -4, 0),
angle: (angle + angle5) * 0.05,
},
{
sphere: refList.current[4],
vector: new THREE.Vector3(4, -4, 0),
angle: angle5,
},
];
positions.forEach(({ sphere, vector, angle }) => {
const newPosition = vector.applyMatrix3(rotate(angle));
newPosition.y += 3;
sphere.position.copy(newPosition);
});
});
return (
<group scale={0.55}>
<Instances>
<sphereGeometry args={[1, 32, 32]} />
<CustomMaterial />
{Array.from({ length: 5 }).map((_, index) => (
<Instance
ref={getRef}
key={index}
position={[(index - 2) * 2, 0, 0]}
/>
))}
</Instances>
</group>
);
};
src/grid/Item12.tsx
import { useGSAP } from "@gsap/react";
import { Instance, Instances } from "@react-three/drei";
import gsap from "gsap";
import { useCallback, useMemo, useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
export const Item12 = () => {
const refList = useRef<THREE.Mesh[]>([]);
const groupRef = useRef<THREE.Group>(null);
const getRef = useCallback((mesh: THREE.Mesh) => {
if (mesh && !refList.current.includes(mesh)) {
refList.current.push(mesh);
}
}, []);
const arrow = useMemo(() => {
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(1, 1);
shape.lineTo(0.5, 1);
shape.lineTo(0.5, 2);
shape.lineTo(-0.5, 2);
shape.lineTo(-0.5, 1);
shape.lineTo(-1, 1);
shape.lineTo(0, 0);
const extrudeSettings = {
depth: 0.5,
bevelEnabled: false,
};
return new THREE.ExtrudeGeometry(shape, extrudeSettings);
}, []);
useGSAP(() => {
if (refList.current.length === 0 || !groupRef.current) return;
gsap
.timeline({})
.from(
refList.current.map((item) => item.rotation),
{
x: (index) => {
return index === 1 ? Math.PI * 2 : index === 3 ? -Math.PI * 2 : 0;
},
y: (index) => {
return index === 0 ? Math.PI * 2 : index === 2 ? -Math.PI * 2 : 0;
},
duration: 5,
repeat: -1,
ease: "none",
}
)
.to(
groupRef.current.rotation,
{
z: Math.PI * 2,
duration: 10,
repeat: -1,
ease: "none",
},
0
);
}, []);
const arrows = useMemo(() => {
return [
{ position: [0, 2, -0.25], rotation: [0, 0, 0] },
{ position: [2, 0, -0.25], rotation: [0, 0, -Math.PI / 2] },
{ position: [0, -2, -0.25], rotation: [0, 0, -Math.PI] },
{ position: [-2, 0, -0.25], rotation: [0, 0, Math.PI / 2] },
];
}, []);
return (
<group scale={0.7} ref={groupRef}>
<mesh>
<boxGeometry></boxGeometry>
<CustomMaterial></CustomMaterial>
</mesh>
<Instances geometry={arrow}>
<CustomMaterial></CustomMaterial>
{arrows.map((item, index) => {
return (
<Instance
ref={getRef}
position={[item.position[0], item.position[1], item.position[2]]}
rotation={[item.rotation[0], item.rotation[1], item.rotation[2]]}
key={index}
/>
);
})}
</Instances>
</group>
);
};
src/grid/Item2.tsx
import { useGSAP } from "@gsap/react";
import { Center, Instance, Instances } from "@react-three/drei";
import gsap from "gsap";
import { useCallback, useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
export const Item2 = () => {
const groupRef = useRef<THREE.Group>(null!);
const refList = useRef<THREE.Mesh[]>([]);
const getRef = useCallback((mesh: THREE.Mesh) => {
if (mesh && !refList.current.includes(mesh)) {
refList.current.push(mesh);
}
}, []);
useGSAP(() => {
gsap
.timeline()
.to(
refList.current.map((item) => item.rotation),
{
y: `+=${Math.PI * 2}`,
repeat: -1,
duration: 6,
ease: "none",
}
)
.to(
groupRef.current.rotation,
{
z: Math.PI * 2,
duration: 24,
ease: "none",
repeat: -1,
},
0
);
}, []);
const radius = 3;
return (
<Center>
<group rotation={[0, 0, 0]}>
<group rotation={[0, 0, 0]} scale={0.6} ref={groupRef}>
<Instances>
<boxGeometry args={[1, 0.2, 1]}></boxGeometry>
<CustomMaterial></CustomMaterial>
{Array.from({ length: 20 }).map((_, index) => {
return (
<group
key={index}
rotation={[0, 0, (index / 20) * 2 * Math.PI]}
position={[
Math.cos((index / 20) * 2 * Math.PI) * radius,
Math.sin((index / 20) * 2 * Math.PI) * radius,
0,
]}
>
<Instance ref={getRef} />
</group>
);
})}
</Instances>
</group>
</group>
</Center>
);
};
src/grid/Item3.tsx
import { Center, Instance, Instances } from "@react-three/drei";
import { GroupProps, useFrame } from "@react-three/fiber";
import { useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
const radius = 3;
const count = 8;
function Item(props: GroupProps) {
const ref = useRef<THREE.Group>(null);
useFrame(() => {
if (ref.current) {
ref.current.rotation.x += 0.01;
ref.current.rotation.y += 0.01;
ref.current.rotation.z += 0.01;
}
});
return (
<group {...props}>
<group ref={ref} rotation={[0, Math.PI / count, Math.PI / 2]}>
<Instance />
</group>
</group>
);
}
export const Item3 = () => {
const groupRef = useRef<THREE.Group>(null!);
useFrame(() => {
if (groupRef.current) {
groupRef.current.rotation.z -= 0.01;
}
});
return (
<Center>
<group>
<group scale={0.6} ref={groupRef}>
<Instances>
<cylinderGeometry args={[1, 1, 0.1, 64]}></cylinderGeometry>
<CustomMaterial></CustomMaterial>
{Array.from({ length: 8 }).map((_, index) => {
return (
<Item
position={[
radius *
Math.cos((index * 2 * Math.PI) / count + Math.PI / 4),
radius *
Math.sin((index * 2 * Math.PI) / count + Math.PI / 4),
0,
]}
rotation={[0, 0, (index * 2 * Math.PI) / count]}
key={index}
></Item>
);
})}
</Instances>
</group>
</group>
</Center>
);
};
src/grid/Item4.tsx
import { useGSAP } from "@gsap/react";
import { Center } from "@react-three/drei";
import gsap from "gsap";
import { useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
export const Item4 = () => {
const ring1Ref = useRef<THREE.Mesh>(null);
const ring2Ref = useRef<THREE.Mesh>(null);
const cone1Ref = useRef<THREE.Mesh>(null);
const cone2Ref = useRef<THREE.Mesh>(null);
const groupRef = useRef<THREE.Group>(null);
useGSAP(() => {
if (
ring1Ref.current &&
ring2Ref.current &&
cone1Ref.current &&
cone2Ref.current &&
groupRef.current
) {
gsap
.timeline({
repeat: -1,
})
.to(
ring1Ref.current.rotation,
{
z: `+=${Math.PI * 2}`,
x: `+=${Math.PI * 2}`,
duration: 4,
ease: "none",
},
0
)
.to(
ring2Ref.current.rotation,
{
z: `-=${Math.PI * 2}`,
x: `-=${Math.PI * 2}`,
ease: "none",
duration: 4,
},
0
)
.to(
groupRef.current.rotation,
{
y: Math.PI * 2,
duration: 4,
ease: "none",
},
0
);
}
}, []);
return (
<Center ref={groupRef}>
<mesh ref={ring1Ref}>
<torusGeometry args={[2.1, 0.1]}></torusGeometry>
<CustomMaterial></CustomMaterial>
</mesh>
<mesh ref={ring2Ref} rotation={[Math.PI / 2, 0, 0]}>
<torusGeometry args={[1.8, 0.1]}></torusGeometry>
<CustomMaterial></CustomMaterial>
</mesh>
<group scale={0.8}>
<mesh position={[0, 1, 0]} rotation={[0, 0, 0]} ref={cone1Ref}>
<coneGeometry args={[1, 1.41, 4]}></coneGeometry>
<CustomMaterial></CustomMaterial>
</mesh>
<mesh position={[0, -1, 0]} rotation={[-Math.PI, 0, 0]} ref={cone2Ref}>
<coneGeometry args={[1, 1.41, 4]}></coneGeometry>
<CustomMaterial></CustomMaterial>
</mesh>
</group>
</Center>
);
};
src/grid/Item5.tsx
import { useGSAP } from "@gsap/react";
import { Center, Instance, Instances } from "@react-three/drei";
import gsap from "gsap";
import { useMemo, useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
export const Item5 = () => {
const groupRef = useRef<THREE.Group>(null);
const firstLayerRef = useRef<THREE.Group>(null);
const secondLayerRef = useRef<THREE.Group>(null);
const thirdLayerRef = useRef<THREE.Group>(null);
const blockSize = 1;
const gap = 0.1;
const distance = blockSize + gap;
const layers = useMemo(() => {
const layer1 = [];
const layer2 = [];
const layer3 = [];
for (let x = -1; x <= 1; x++) {
for (let y = -1; y <= 1; y++) {
for (let z = -1; z <= 1; z++) {
if (z === -1) {
layer1.push(
new THREE.Vector3(x * distance, y * distance, z * distance)
);
} else if (z === 0) {
layer2.push(
new THREE.Vector3(x * distance, y * distance, z * distance)
);
} else {
layer3.push(
new THREE.Vector3(x * distance, y * distance, z * distance)
);
}
}
}
}
return [layer1, layer2, layer3];
}, [distance]);
useGSAP(() => {
if (
firstLayerRef.current &&
secondLayerRef.current &&
thirdLayerRef.current &&
groupRef.current
) {
gsap
.timeline({
repeat: -1,
})
.to(firstLayerRef.current.rotation, {
z: Math.PI,
duration: 1.5,
})
.to(
secondLayerRef.current.rotation,
{
z: Math.PI,
duration: 1.5,
delay: 0.15,
},
"<"
)
.to(
thirdLayerRef.current.rotation,
{
z: Math.PI,
duration: 1.5,
delay: 0.25,
},
"<"
)
.to(
groupRef.current.rotation,
{
y: Math.PI * 2,
duration: 1.75,
},
0
);
}
}, []);
return (
<Center>
<group rotation={[0, 0, Math.PI / 8]} scale={1.2}>
<group rotation={[0, Math.PI / 2, 0]} scale={0.6} ref={groupRef}>
<Instances>
<boxGeometry args={[1, 1, 1]}></boxGeometry>
<CustomMaterial></CustomMaterial>
<group ref={firstLayerRef}>
{layers[0].map((item, index) => {
return <Instance key={index} position={item} />;
})}
</group>
<group ref={secondLayerRef}>
{layers[1].map((item, index) => {
return <Instance key={index} position={item} />;
})}
</group>
<group ref={thirdLayerRef}>
{layers[2].map((item, index) => {
return <Instance key={index} position={item} />;
})}
</group>
</Instances>
</group>
</group>
</Center>
);
};
src/grid/Item6.tsx
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { useMemo, useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
class SemiCircleCurve extends THREE.Curve<THREE.Vector3> {
scale: number;
constructor(scale = 1) {
super();
this.scale = scale;
}
getPoint(t: number) {
const radians = t * Math.PI;
const x = Math.cos(radians) * this.scale;
const y = Math.sin(radians) * this.scale;
return new THREE.Vector3(x, y, 0);
}
}
export const Item6 = () => {
const path = useMemo(() => {
return new SemiCircleCurve(2);
}, []);
const path2 = useMemo(() => {
return new SemiCircleCurve(2.02);
}, []);
const ballRef = useRef<THREE.Mesh>(null);
const tubeRef = useRef<THREE.Mesh>(null);
const t = useRef(0);
useGSAP(() => {
if (!ballRef.current) return;
if (!tubeRef.current) return;
gsap
.timeline({})
.to(t, {
current: 2,
duration: 1.5,
ease: "none",
repeat: -1,
onUpdate: () => {
if (!ballRef.current) return;
const point = path2.getPoint(t.current);
ballRef.current.position.set(point.x, point.y, point.z);
},
})
.to(
tubeRef.current.rotation,
{
z: -Math.PI,
ease: "back.out",
duration: 1.5,
repeat: -1,
},
0
);
}, []);
return (
<group scale={0.8}>
<mesh ref={ballRef} position={[0, 2, 0]}>
<sphereGeometry args={[0.7]}></sphereGeometry>
<CustomMaterial></CustomMaterial>
</mesh>
<mesh rotation={[0, 0, Math.PI]} ref={tubeRef}>
<tubeGeometry args={[path, 20, 0.8, 8, false]}></tubeGeometry>
<CustomMaterial side={THREE.DoubleSide}></CustomMaterial>
</mesh>
</group>
);
};
src/grid/Item7.tsx
import { useGSAP } from "@gsap/react";
import { Center, RoundedBox } from "@react-three/drei";
import gsap from "gsap";
import { useCallback, useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
export const Item7 = () => {
const refList = useRef<THREE.Mesh[]>([]);
const getRef = useCallback((mesh: THREE.Mesh) => {
if (mesh && !refList.current.includes(mesh)) {
refList.current.push(mesh);
}
}, []);
useGSAP(() => {
if (refList.current.length === 0) return;
gsap.to(
refList.current.map((i) => i.rotation),
{
y: `+=${Math.PI / 2}`,
repeat: -1,
ease: "back",
stagger: {
each: 0.1,
},
duration: 1,
}
);
}, []);
return (
<Center scale={3} rotation={[Math.PI / 10, Math.PI / 4, 0]}>
{Array.from({ length: 5 }).map((_, index) => {
return (
<RoundedBox
ref={getRef}
args={[1, 0.1, 1]}
key={index}
radius={0.02}
position={[0, (index - 1) * 0.1, 0]}
>
<CustomMaterial></CustomMaterial>
</RoundedBox>
);
})}
</Center>
);
};
src/grid/Item8.tsx
import { useGSAP } from "@gsap/react";
import { Center } from "@react-three/drei";
import gsap from "gsap";
import { useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
export const Item8 = () => {
const ref1 = useRef<THREE.Mesh>(null);
const ref2 = useRef<THREE.Mesh>(null);
const groupRef = useRef<THREE.Group>(null);
useGSAP(() => {
if (!ref1.current || !ref2.current || !groupRef.current) return;
gsap
.timeline({
defaults: {
ease: "elastic",
repeat: -1,
},
})
.to(ref1.current.position, {
keyframes: [
{
x: -1.5,
duration: 2,
},
{
x: 1.5,
duration: 2,
},
],
repeat: -1,
})
.to(
ref2.current.position,
{
keyframes: [
{
x: 1.5,
duration: 2,
},
{
x: -1.5,
duration: 2,
},
],
repeat: -1,
},
0
)
.to(
groupRef.current.rotation,
{
z: `${Math.PI}`,
duration: 4,
},
0
);
}, []);
return (
<Center ref={groupRef}>
<mesh position={[1.5, 1, 0]} rotation={[Math.PI / 2, 0, 0]} ref={ref1}>
<cylinderGeometry args={[0.5, 0.5]}></cylinderGeometry>
<CustomMaterial></CustomMaterial>
</mesh>
<mesh>
<boxGeometry args={[4, 0.4, 1]}></boxGeometry>
<CustomMaterial></CustomMaterial>
</mesh>
<mesh position={[-1.5, -1, 0]} rotation={[Math.PI / 2, 0, 0]} ref={ref2}>
<cylinderGeometry args={[0.5, 0.5]}></cylinderGeometry>
<CustomMaterial></CustomMaterial>
</mesh>
</Center>
);
};
src/grid/Item9.tsx
import { useGSAP } from "@gsap/react";
import { Center, Instance, Instances } from "@react-three/drei";
import gsap from "gsap";
import { useCallback, useRef } from "react";
import * as THREE from "three";
import { CustomMaterial } from "./material";
export const Item9 = () => {
const refList = useRef<THREE.Mesh[]>([]);
const getRef = useCallback((mesh: THREE.Mesh) => {
if (mesh && !refList.current.includes(mesh)) {
refList.current.push(mesh);
}
}, []);
useGSAP(() => {
if (refList.current.length === 0) return;
refList.current.forEach((mesh, index) => {
if (mesh) {
gsap.to(mesh.scale, {
x: 0.3,
z: 0.3,
delay: 0.25 * index,
repeat: -1,
yoyo: true,
ease: "sine.inOut",
duration: 1,
});
}
});
}, []);
return (
<Center>
<group rotation={[0, 0, Math.PI / 4]}>
<group rotation={[0, 0, Math.PI / 2]}>
<Instances>
<cylinderGeometry args={[1, 1, 0.2, 64]}></cylinderGeometry>
<CustomMaterial></CustomMaterial>
{Array.from({ length: 10 }).map((_, index) => {
return (
<Instance
ref={getRef}
key={index}
position={[0, 0.5 * index, 2]}
/>
);
})}
</Instances>
</group>
</group>
</Center>
);
};
src/grid/material.tsx
import { useTexture } from "@react-three/drei";
import { MeshMatcapMaterialProps } from "@react-three/fiber";
import { forwardRef } from "react";
import { MeshMatcapMaterial } from "three";
import { useStore } from "../store/useStore";
export const CustomMaterial = forwardRef<
MeshMatcapMaterial,
MeshMatcapMaterialProps
>((props, ref) => {
const matcap = useStore((x) => x.texture);
const texture = useTexture(matcap);
return (
<meshMatcapMaterial
{...props}
ref={ref}
matcap={texture}
></meshMatcapMaterial>
);
});
src/index.css
@import url("https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
.zen-dots-regular {
font-family: "Zen Dots", sans-serif;
font-weight: 400;
font-style: normal;
}
::-webkit-scrollbar {
width: 8px;
height: 1px;
}
::-webkit-scrollbar-track {
border-radius: 0;
background: black;
}
::-webkit-scrollbar-thumb {
background: rgba(49, 49, 49, 0.6);
border-radius: 10px;
}
.background {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 4 4'%3E%3Cpath fill='%23FFFFFF' fill-opacity='0.02' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
/* Glowing Cards by Leon van Zyl (https://codepen.io/leonvanzyl/pen/jOKwmEw?editors=0110) */
.card::before {
content: "";
height: 100%;
width: 100%;
opacity: 0;
transition: opacity 500ms;
position: absolute;
border-radius: inherit;
z-index: 3;
top: 0px;
left: 0px;
background: radial-gradient(
800px circle at var(--mouse-x) var(--mouse-y),
rgba(255, 255, 255, 0.06),
transparent 40%
);
}
.card:hover::before {
opacity: 1;
}
src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { ReactLenis, useLenis } from "lenis/react";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<ReactLenis root>
<App />
</ReactLenis>
</React.StrictMode>
);
src/store/useStore.ts
import { create } from "zustand";
const textures = ["1.jpeg", "2.jpeg", "3.jpeg"];
interface Store {
index: number;
texture: string;
setIndex: (num: number) => void;
}
export const useStore = create<Store>((set) => ({
index: 0,
texture: textures[0],
setIndex: (num: number) => set({ index: num, texture: textures[num] }),
}));
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: './',
});
Original author attribution실행 안내·자료
Origami: 12 Free Animated 3D Objects
Original author: deadrabbbbit
Published by Codrops. Copyright (c) 2026 Codrops.
License: MIT, pursuant to the publisher's downloadable-demo grant.
Keep CODROPS-MIT-2026.txt and the original project notices with copies.
Third-party media exceptions and credits are recorded separately in the source inventory.
Media credits and license evidence실행 안내·자료
README.md
## License
[MIT](LICENSE)
Made with :blue_heart: by [deadrabbbbit](https://x.com/deadrabbbbit) and [Codrops](http://www.codrops.com)
Bundled dependency licenses실행 안내·자료
GSAP standard license snapshot
Source: https://gsap.com/community/standard-license/
Retrieved: 2026-09-22T04:22:49.089Z
Original distribution copyright and version headers remain in the runtime code.
Standard "No Charge" GSAP License
I. DEFINITIONS
“GSAP License” means the terms and conditions of this GSAP Software License Agreement.
"GSAP Products" means any Software made available at gsap.com (https://gsap.com) or any successor sites, including but not limited to the GSAP animation library and related plugins, tools, or extensions.
"Permitted Uses" means the implementation and/or use of GSAP Products on any website, web application, or digital interface by any person or entity (which may include, for clarity, those of companies that compete with Webflow in other areas of business).
"Prohibited Uses" means any implementation and/or use of GSAP Products in tools that allow users to build visual animations without code that encourages, induces, or materially assists in creating a solution that competes with Webflow’s visual animation building capabilities.
"Competitive Products" means any software, tool, or service that enables users to create, edit, or manage animations through a visual interface or builder similar to Webflow (https://webflow.com).
II. GRANT OF LICENSE
Subject to the terms and conditions of this GSAP License, Webflow grants you a non-exclusive, worldwide license to use, reproduce, display, and implement GSAP Products solely for Permitted Uses.
III. RESTRICTIONS
You may not:
Use any GSAP Products for any Prohibited Uses without prior written consent;
Reverse engineer any GSAP Products for the purpose of creating Competitive Products;
Remove or alter any proprietary notices or branding from GSAP Products.
IV. OWNERSHIP AND INTELLECTUAL PROPERTY
All intellectual property rights in GSAP Products, including but not limited to copyright, patents, trademarks, and trade secrets, remain the exclusive property of Webflow. This GSAP License does not transfer any ownership rights in GSAP Products to you.
V. TERMINATION
Webflow may terminate this GSAP License and revoke your access in its discretion if you fail to comply with any of these terms and conditions. Upon termination, you must cease all use of GSAP Products and destroy all copies in your possession.
VI. MISCELLANEOUS PROVISIONS
General: This GSAP License is incorporated into and subject to Webflow’s Terms of Service available here (https://webflow.com/legal/terms) ("Terms of Service"). In the event of any conflict or inconsistency between this GSAP License and the Terms of Service, the terms of this GSAP License shall govern in relation to your use of any GSAP Products.
Amendments: Webflow reserves the right to update or modify this GSAP License at any time by posting the revised terms on this website, provided that any such updates or modifications shall not result in any material degradation to the security, integrity, or functionality of any GSAP Products. You understand and agree that your continued use of any GSAP Products after such revisions to this GSAP License constitutes your acceptance of this GSAP License as revised. If you do not accept the revised GSAP License, you are prohibited from using versions of the GSAP Products released after the effective date of the revised GSAP License (as well as any updates made to previous versions). Notwithstanding, you may continue using previous versions of GSAP Products under the applicable terms licensed to you prior to the effective date of the revised GSAP License (for clarity, excluding any updates made thereto).
No Waiver: Failure of Webflow to enforce any provision of this GSAP License shall not constitute a waiver of future enforcement of that or any other provision.
FAQ
Is it acceptable for AI tools like ChatGPT, Cursor, Lovable, Webstudio, etc. to generate GSAP code?
Absolutely! AI-generated code is not a "Prohibited Use".
What if a WordPress plugin or theme or other niche tool allows users to create GSAP-driven effects through a visual interface? Is that prohibited?
We want to encourage developers to build on top of GSAP, including visual tools that don't directly compete with Webflow's rich animation-building capabilities. If you are not sure if your product might be considered a "Prohibited Use", feel free to contact us (https://gsap.com/contact) so we can talk through it!
Can I really use GSAP in commercial projects without paying anything?
Yes, really! Commercial usage is covered under the standard license. All of GSAP including the plugins that were formerly "members-only" like SplitText (https://gsap.com/docs/v3/Plugins/SplitText/) and MorphSVG (https://gsap.com/docs/v3/Plugins/MorphSVGPlugin) can be used in commercial projects at no charge. Enjoy! 💚
Effective date: April 30, 2025
Last modified date: May 30, 2025
Copyright (©) 2025, Webflow
react@18.3.1 — LICENSE
MIT License
Copyright (c) Facebook, Inc. and its affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
scheduler@0.23.2 — LICENSE
MIT License
Copyright (c) Facebook, Inc. and its affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
react-dom@18.3.1 — LICENSE
MIT License
Copyright (c) Facebook, Inc. and its affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@babel/runtime@7.29.7 — LICENSE
MIT License
Copyright (c) 2014-present Sebastian McKenzie and other contributors
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
three@0.166.1 — LICENSE
The MIT License
Copyright © 2010-2024 three.js authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
react-reconciler@0.27.0 — LICENSE
MIT License
Copyright (c) Facebook, Inc. and its affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
zustand@3.7.2 — LICENSE
MIT License
Copyright (c) 2019 Paul Henschel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
scheduler@0.21.0 — LICENSE
MIT License
Copyright (c) Facebook, Inc. and its affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
suspend-react@0.1.3 — LICENSE
MIT License
Copyright (c) 2021 Paul Henschel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
react-use-measure@2.1.7 — LICENSE
MIT License
Copyright (c) 2019-2025 Poimandres
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
its-fine@1.2.5 — LICENSE
MIT License
Copyright (c) 2022 Poimandres
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@react-three/drei@9.108.4 — LICENSE
MIT License
Copyright (c) 2020 react-spring
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
zustand@3.7.2 — LICENSE
MIT License
Copyright (c) 2019 Paul Henschel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@use-gesture/core@10.3.1 — LICENSE
Copyright (c) 2018-present Paul Henschel <drcmda@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@use-gesture/react@10.3.1 — LICENSE
Copyright (c) 2018-present Paul Henschel <drcmda@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@react-spring/rafz@9.6.1 — LICENSE
MIT License
Copyright (c) 2018-present Paul Henschel, react-spring, all contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@react-spring/shared@9.6.1 — LICENSE
MIT License
Copyright (c) 2018-present Paul Henschel, react-spring, all contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@react-spring/animated@9.6.1 — LICENSE
MIT License
Copyright (c) 2018-present Paul Henschel, react-spring, all contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@react-spring/types@9.6.1 — LICENSE
MIT License
Copyright (c) 2018-present Paul Henschel, react-spring, all contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@react-spring/core@9.6.1 — LICENSE
MIT License
Copyright (c) 2018-present Paul Henschel, react-spring, all contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@react-spring/three@9.6.1 — LICENSE
MIT License
Copyright (c) 2018-present Paul Henschel, react-spring, all contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
three-stdlib@2.36.1 — LICENSE
MIT License
Copyright (c) 2021-2023 Poimandres
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
potpack@1.0.2 — LICENSE
ISC License
Copyright (c) 2018, Mapbox
Permission to use, copy, modify, and/or distribute this software for any purpose
with or without fee is hereby granted, provided that the above copyright notice
and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
THIS SOFTWARE.
fflate@0.6.11 — LICENSE
MIT License
Copyright (c) 2020 Arjun Barrett
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
troika-worker-utils@0.49.0 — LICENSE
MIT License
Copyright (c) 2019 ProtectWise
Copyright (c) 2021 Jason Johnston
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
webgl-sdf-generator@1.1.1 — LICENSE.txt
Copyright (c) 2021 Jason Johnston
MIT License
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
bidi-js@1.1.0 — LICENSE.txt
Copyright (c) 2021 Jason Johnston
MIT License
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
troika-three-utils@0.49.0 — LICENSE
MIT License
Copyright (c) 2019 ProtectWise
Copyright (c) 2021 Jason Johnston
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
troika-three-text@0.49.1 — LICENSE
MIT License
Copyright (c) 2019 ProtectWise
Copyright (c) 2021 Jason Johnston
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
meshline@3.3.1 — LICENSE
MIT License
Copyright (c) 2016 Jaume Sanchez
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
camera-controls@2.10.1 — LICENSE
MIT License
Copyright (c) 2017 @yomotsu
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
hls.js@1.3.5 — LICENSE
Copyright (c) 2017 Dailymotion (http://www.dailymotion.com)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
src/remux/mp4-generator.js and src/demux/exp-golomb.ts implementation in this project
are derived from the HLS library for video.js (https://github.com/videojs/videojs-contrib-hls)
That work is also covered by the Apache 2 License, following copyright:
Copyright (c) 2013-2015 Brightcove
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
stats.js@0.17.0 — LICENSE
The MIT License
Copyright (c) 2009-2016 stats.js authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
detect-gpu@5.0.70 — LICENSE
MIT License
Copyright (c) 2020 Tim van Scherpenzeel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
three-mesh-bvh@0.7.6 — LICENSE
MIT License
Copyright (c) 2018 Garrett Johnson
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
prop-types@15.8.1 — LICENSE
MIT License
Copyright (c) 2013-present, Facebook, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
react-composer@5.0.3 — LICENSE
MIT License
Copyright (c) 2018 James, please
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
@monogrid/gainmap-js@3.4.0 — LICENSE
MIT License
Copyright (c) 2023 MONOGRID
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
uuid@9.0.1 — LICENSE.md
The MIT License (MIT)
Copyright (c) 2010-2020 Robert Kieffer and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
zustand@4.5.4 — LICENSE
MIT License
Copyright (c) 2019 Paul Henschel
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
use-sync-external-store@1.2.0 — LICENSE
MIT License
Copyright (c) Facebook, Inc. and its affiliates.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
tunnel-rat@0.1.2 — LICENSE
MIT License
Copyright (c) 2022 Poimandres
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
lenis@1.1.6 — LICENSE
The MIT License
Copyright (c) 2024 darkroom.engineering
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
BEHIND THE EXAMPLE
이 장면을 만드는 원리
개별 화살표와 전체 그룹의 두 반복 회전
사용자 정지와 시스템 선호 변경을 구분하고 진행 중인 표현을 정리합니다.
- 이 예제에서는
- Item12는 공유 ExtrudeGeometry의 네 화살표를 만들고 개별 x·y 회전을 5초, 전체 group의 z 회전을 10초 주기로 무한 반복합니다.
코드와 함께 확인하기
코드에서 찾기
groupRef.current.rotationItem12.tsx한 도형에 중첩된 두 회전 루프의 시간을 별도로 설정합니다.
직접 해보기
정지와 움직임 감소를 켠 뒤 두 회전이 모두 멈추는지 확인합니다.
살펴볼 변화개별 화살표만 멈추고 전체 그룹은 계속 돌지 않도록 정지 범위를 정하고 정적 형태도 유지해야 합니다.
