react-two.js 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 @jonobr1 / http://jono.fyi
+
+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.

package/README.md

@@ -0,0 +1,95 @@
+# @react/two.js
+
+A React virtual DOM for Two.js — a renderer agnostic two-dimensional drawing API for the web. Supports SVG, Canvas, and WebGL rendering. Declaratively describe your Two.js scene within your React application.
+
+## Installation
+
+```bash
+npm install @react/two.js react react-dom two.js
+```
+
+## Quick Start
+
+```jsx
+import { Canvas, Circle, Rectangle, useFrame } from '@react/two.js';
+import { useRef } from 'react';
+
+function AnimatedCircle() {
+  const circleRef = useRef();
+  
+  useFrame((elapsed) => {
+    if (circleRef.current) {
+      circleRef.current.rotation = elapsed * 0.5;
+    }
+  });
+  
+  return <Circle ref={circleRef} radius={50} fill="red" />;
+}
+
+function App() {
+  return (
+    <Canvas width={800} height={600}>
+      <Rectangle width={100} height={100} fill="blue" x={100} y={100} />
+      <AnimatedCircle />
+    </Canvas>
+  );
+}
+```
+
+## Available Components
+
+### Core Components
+- `<Canvas>` - Main container component
+- `<Group>` - Container for organizing components
+
+### Shape Components
+- `<Circle>` - Basic circle with radius
+- `<Rectangle>` - Rectangle with width/height
+- `<RoundedRectangle>` - Rectangle with corner radius
+- `<Ellipse>` - Oval shape with width/height
+- `<Line>` - Straight line between two points
+- `<Path>` - Custom path with vertices
+- `<Points>` - Collection of points
+- `<Polygon>` - Regular polygon with sides
+- `<Star>` - Star shape with inner/outer radius
+- `<ArcSegment>` - Arc segment with angles
+- `<Text>` - Text rendering component
+
+### Advanced Components
+- `<Sprite>` - Image sprite component
+- `<ImageSequence>` - Animated image sequence
+- `<LinearGradient>` - Linear gradient fill
+- `<RadialGradient>` - Radial gradient fill
+- `<Texture>` - Texture mapping component
+
+## Hooks
+
+### `useTwo()`
+Access the Two.js instance and canvas dimensions:
+```jsx
+const { width, height, instance } = useTwo();
+```
+
+### `useFrame()`
+Create smooth animations with frame-based updates:
+```jsx
+useFrame((elapsed) => {
+  // Animation logic runs on every frame
+  if (ref.current) {
+    ref.current.rotation = elapsed * 0.5;
+  }
+});
+```
+
+## TypeScript Support
+
+Full TypeScript support with proper types for all components and refs:
+
+```tsx
+import { RefCircle } from '@react/two.js';
+
+const circleRef = useRef<RefCircle>(null);
+```
+
+## Roadmap
+- [ ] Add helpers (aka gizmos)

package/dist/ArcSegment.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { ArcSegment as Instance } from 'two.js/src/shapes/arc-segment';
+export type RefArcSegment = Instance;
+export declare const ArcSegment: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    linewidth?: number | undefined;
+    opacity?: number | undefined;
+    visible?: boolean | undefined;
+    cap?: string | undefined;
+    join?: string | undefined;
+    miter?: number | undefined;
+    closed?: boolean | undefined;
+    curved?: boolean | undefined;
+    automatic?: boolean | undefined;
+    beginning?: number | undefined;
+    ending?: number | undefined;
+    dashes?: (number[] & {
+        offset?: number;
+    }) | undefined;
+    vertices?: import("two.js/src/anchor").Anchor[] | undefined;
+    startAngle?: number | undefined;
+    endAngle?: number | undefined;
+    innerRadius?: number | undefined;
+    outerRadius?: number | undefined;
+} & {
+    x?: number;
+    y?: number;
+    resolution?: number;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/Circle.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { Circle as Instance } from 'two.js/src/shapes/circle';
+export type RefCircle = Instance;
+export declare const Circle: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    linewidth?: number | undefined;
+    opacity?: number | undefined;
+    visible?: boolean | undefined;
+    cap?: string | undefined;
+    join?: string | undefined;
+    miter?: number | undefined;
+    closed?: boolean | undefined;
+    curved?: boolean | undefined;
+    automatic?: boolean | undefined;
+    beginning?: number | undefined;
+    ending?: number | undefined;
+    dashes?: (number[] & {
+        offset?: number;
+    }) | undefined;
+    vertices?: import("two.js/src/anchor").Anchor[] | undefined;
+    radius?: number | undefined;
+} & {
+    x?: number;
+    y?: number;
+    resolution?: number;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/Context.d.ts

@@ -0,0 +1,15 @@
+import Two from 'two.js';
+import type { Group } from 'two.js/src/group';
+export declare const Context: import("react").Context<{
+    two: Two | null;
+    parent: Group | null;
+    width: number;
+    height: number;
+}>;
+export declare const useTwo: () => {
+    two: Two | null;
+    parent: Group | null;
+    width: number;
+    height: number;
+};
+export declare const useFrame: (callback: (elapsed: number, frameDelta: number) => void, deps?: unknown[]) => void;

package/dist/Ellipse.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Ellipse as Instance } from 'two.js/src/shapes/ellipse';
+export type RefEllipse = Instance;
+export declare const Ellipse: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    linewidth?: number | undefined;
+    opacity?: number | undefined;
+    visible?: boolean | undefined;
+    cap?: string | undefined;
+    join?: string | undefined;
+    miter?: number | undefined;
+    closed?: boolean | undefined;
+    curved?: boolean | undefined;
+    automatic?: boolean | undefined;
+    beginning?: number | undefined;
+    ending?: number | undefined;
+    dashes?: (number[] & {
+        offset?: number;
+    }) | undefined;
+    vertices?: import("two.js/src/anchor").Anchor[] | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+} & {
+    x?: number;
+    y?: number;
+    resolution?: number;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/Group.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Group as Instance } from 'two.js/src/group';
+export type RefGroup = Instance;
+export declare const Group: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    linewidth?: number | undefined;
+    cap?: "butt" | "round" | "square" | undefined;
+    join?: "butt" | "round" | "square" | undefined;
+    miter?: number | undefined;
+    closed?: boolean | undefined;
+    curved?: boolean | undefined;
+    automatic?: boolean | undefined;
+} & {
+    x?: number;
+    y?: number;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/ImageSequence.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { ImageSequence as Instance } from 'two.js/src/effects/image-sequence';
+import type { Texture } from 'two.js/src/effects/texture';
+export type RefImageSequence = Instance;
+export declare const ImageSequence: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | Texture | undefined;
+    stroke?: string | import("two.js/src/effects/gradient").Gradient | Texture | undefined;
+    linewidth?: number | undefined;
+    opacity?: number | undefined;
+    visible?: boolean | undefined;
+    cap?: string | undefined;
+    join?: string | undefined;
+    miter?: number | undefined;
+    closed?: boolean | undefined;
+    curved?: boolean | undefined;
+    automatic?: boolean | undefined;
+    beginning?: number | undefined;
+    ending?: number | undefined;
+    dashes?: (number[] & {
+        offset?: number;
+    }) | undefined;
+    vertices?: import("two.js/src/anchor").Anchor[] | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    textures?: any[] | undefined;
+    frameRate?: number | undefined;
+    index?: number | undefined;
+} & {
+    paths?: string | string[] | Texture | Texture[];
+    x?: number;
+    y?: number;
+    autoPlay?: boolean;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/Line.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Line as Instance } from 'two.js/src/shapes/line';
+export type RefLine = Instance;
+export declare const Line: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    linewidth?: number | undefined;
+    opacity?: number | undefined;
+    visible?: boolean | undefined;
+    cap?: string | undefined;
+    join?: string | undefined;
+    miter?: number | undefined;
+    closed?: boolean | undefined;
+    curved?: boolean | undefined;
+    automatic?: boolean | undefined;
+    beginning?: number | undefined;
+    ending?: number | undefined;
+    dashes?: (number[] & {
+        offset?: number;
+    }) | undefined;
+    vertices?: import("two.js/src/anchor").Anchor[] | undefined;
+    left?: import("two.js/src/anchor").Anchor | undefined;
+    right?: import("two.js/src/anchor").Anchor | undefined;
+} & {
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/LinearGradient.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { LinearGradient as Instance } from 'two.js/src/effects/linear-gradient';
+export type RefLinearGradient = Instance;
+export declare const LinearGradient: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    spread?: "repeat" | "pad" | "reflect" | undefined;
+    units?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
+    stops?: import("two.js/src/effects/stop").Stop[] | undefined;
+    left?: import("two.js/src/vector").Vector | undefined;
+    right?: import("two.js/src/vector").Vector | undefined;
+} & {
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/Path.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { Path as Instance } from 'two.js/src/path';
+import { ShapeProps } from './Properties';
+export type PathProps = ShapeProps | 'fill' | 'stroke' | 'linewidth' | 'opacity' | 'visible' | 'cap' | 'join' | 'miter' | 'closed' | 'curved' | 'automatic' | 'beginning' | 'ending' | 'dashes' | 'vertices';
+export type RefPath = Instance;
+export declare const Path: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    linewidth?: number | undefined;
+    opacity?: number | undefined;
+    visible?: boolean | undefined;
+    cap?: string | undefined;
+    join?: string | undefined;
+    miter?: number | undefined;
+    closed?: boolean | undefined;
+    curved?: boolean | undefined;
+    automatic?: boolean | undefined;
+    beginning?: number | undefined;
+    ending?: number | undefined;
+    dashes?: (number[] & {
+        offset?: number;
+    }) | undefined;
+    vertices?: import("two.js/src/anchor").Anchor[] | undefined;
+} & {
+    manual?: boolean;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/Points.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Points as Instance } from 'two.js/src/shapes/points';
+export type RefPoints = Instance;
+export declare const Points: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    linewidth?: number | undefined;
+    opacity?: number | undefined;
+    visible?: boolean | undefined;
+    beginning?: number | undefined;
+    ending?: number | undefined;
+    dashes?: (number[] & {
+        offset?: number;
+    }) | undefined;
+    vertices?: (import("two.js/src/vector").Vector | import("two.js/src/anchor").Anchor)[] | undefined;
+    size?: number | undefined;
+    sizeAttenuation?: boolean | undefined;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/Polygon.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Polygon as Instance } from 'two.js/src/shapes/polygon';
+export type RefPolygon = Instance;
+export declare const Polygon: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    linewidth?: number | undefined;
+    opacity?: number | undefined;
+    visible?: boolean | undefined;
+    cap?: string | undefined;
+    join?: string | undefined;
+    miter?: number | undefined;
+    closed?: boolean | undefined;
+    curved?: boolean | undefined;
+    automatic?: boolean | undefined;
+    beginning?: number | undefined;
+    ending?: number | undefined;
+    dashes?: (number[] & {
+        offset?: number;
+    }) | undefined;
+    vertices?: import("two.js/src/anchor").Anchor[] | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    sides?: number | undefined;
+} & {
+    x?: number;
+    y?: number;
+    radius?: number;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/Properties.d.ts

@@ -0,0 +1,3 @@
+export type ElementProps = 'renderer' | 'id' | 'className';
+export type ShapeProps = ElementProps | 'position' | 'rotation' | 'scale' | 'skewX' | 'skewY' | 'matrix' | 'worldMatrix';
+export type GradientProps = ElementProps | 'spread' | 'units' | 'stops';

package/dist/Provider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import Two from 'two.js';
+type TwoConstructorProps = ConstructorParameters<typeof Two>[0];
+type TwoConstructorPropsKeys = NonNullable<TwoConstructorProps>;
+type ComponentProps = React.PropsWithChildren<TwoConstructorPropsKeys>;
+export declare const Provider: React.FC<ComponentProps>;
+export {};

package/dist/RadialGradient.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { RadialGradient as Instance } from 'two.js/src/effects/radial-gradient';
+export type RefRadialGradient = Instance;
+export declare const RadialGradient: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    spread?: "repeat" | "pad" | "reflect" | undefined;
+    units?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
+    stops?: import("two.js/src/effects/stop").Stop[] | undefined;
+    center?: import("two.js/src/vector").Vector | undefined;
+    radius?: number | undefined;
+    focal?: import("two.js/src/vector").Vector | undefined;
+} & {
+    x?: number;
+    y?: number;
+    focalX?: number;
+    focalY?: number;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;

package/dist/Rectangle.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { Rectangle as Instance } from 'two.js/src/shapes/rectangle';
+export type RefRectangle = Instance;
+export declare const Rectangle: React.ForwardRefExoticComponent<{
+    renderer?: {
+        type: "element" | string;
+        elem?: SVGGElement | SVGPathElement | SVGTextElement | SVGPatternElement | SVGDefsElement | SVGGradientElement | SVGLinearGradientElement | SVGRadialGradientElement | SVGImageElement | SVGClipPathElement | SVGStopElement;
+        onBeforeRender?: () => void;
+        onAfterRender?: () => void;
+    } | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    position?: import("two.js/src/vector").Vector | undefined;
+    rotation?: number | undefined;
+    scale?: number | import("two.js/src/vector").Vector | undefined;
+    skewX?: number | undefined;
+    skewY?: number | undefined;
+    matrix?: import("two.js/src/matrix").Matrix | undefined;
+    worldMatrix?: import("two.js/src/matrix").Matrix | undefined;
+    fill?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    stroke?: string | import("two.js/src/effects/gradient").Gradient | import("two.js/src/effects/texture").Texture | undefined;
+    linewidth?: number | undefined;
+    opacity?: number | undefined;
+    visible?: boolean | undefined;
+    cap?: string | undefined;
+    join?: string | undefined;
+    miter?: number | undefined;
+    closed?: boolean | undefined;
+    curved?: boolean | undefined;
+    automatic?: boolean | undefined;
+    beginning?: number | undefined;
+    ending?: number | undefined;
+    dashes?: (number[] & {
+        offset?: number;
+    }) | undefined;
+    vertices?: import("two.js/src/anchor").Anchor[] | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+} & {
+    x?: number;
+    y?: number;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<Instance | null>>;