anim-3d-obj

A lightweight React component for rendering and animating 3D-like objects using only HTML & CSS.
No WebGL or heavy 3D libraries required.

React Typescript Cuboid Builder

This project allows a user to create Cuboids of any size simply by entering a set of parameters.
The program does the leg work with regard to calculating translationZ depth and config on the fly.

Examples

• 6 sided Cuboid - animate X360 Y360
• 3 sided Object - animate y-axis
• Double box spin
• Floating Ribbon
• Parallel divs animated x and y axis in tandem
• Obj Skeleton

** ANIMATIONS

• fadeInkf: fade object in from 0 to 1 Opacity: demo
• floatX: float object so is not stationary: demo
• floatShadow: float object + add shadow: demo
• pulseSM: pulse object Small: demo
• pulseMD: pulse object Medium: demo
• pulseLG: pulse object Large: demo
• swing: Swing component: demo
• swingDecay: Swing component with decay: demo
• noAnim: no animation place holder

X-AXIS Animations

• X360: rotate 360 degrees on the x-axis: demo
• wobX: wobble on x-axis (degreesHi <-> degreesLow): demo
• fwdx018: spin object on x-axis from 0 degrees to 180 degrees: demo
• fwdx1836: spin object on x-axis from 180 degrees to 360 degrees: demo
• fwdx09: spin object on x-axis from 0 degrees to 90 degrees: demo
• fwdx918: spin object on x-axis from 90 degrees to 180 degrees: demo
• fwdx1827: spin object on x-axis from 180 degrees to 270 degrees: demo
• fwdx2736: spin object on x-axis from 270 degrees to 360 degrees: demo

Y-AXIS Animations

• Y360: rotate 360 degrees on the y-axis: demo
• wobY: wobble on y-axis (degreesHi <-> degreesLow): demo
• fwdy018: spin object on y-axis from 0 degrees to 180 degrees: demo
• fwdy1836: spin object on y-axis from 180 degrees to 360 degrees: demo
• fwdy09: spin object on y-axis from 0 degrees to 90 degrees: demo
• fwdy918: spin object on y-axis from 90 degrees to 180 degrees: demo
• fwdy1827: spin object on y-axis from 180 degrees to 270 degrees: demo
• fwdy2736: spin object on y-axis from 270 degrees to 360 degrees: demo

Config

Animations:

Animations are optional. Either or both of anim1 or anim2 can be applied to the component. Animations are applied to 2 wrapping divs respectively.

const anim1 = {
   border: "", // while testing reveal the animation wrapper
   degreesHi: -45, // degrees if spin
   degreesLow: 45, // degrees if spin
   delay: 0, // start delay in seconds
   direction: "normal", //normal alternating reverse
   duration: 8, // seconds
   fillMode: "forwards", // none forwards backwards both
   iterationCount: "infinite", // number or infinte
   name: "Y360", // ** ANIMATIONS (above)
   timing: "ease-in-out", // linear ease ease-in-out
};

Faces:

This is an array of objects containing the face used for a given component

export interface FaceType {
   name?: string; // front,back,left,right,top,top_rear,top_front,bottom,bottom_rear,bottom_front
   css?: string | undefined;
   body?: any; // can be JSX Component | string | number
}

const faces: FaceType[] = [
   {
      name: "back",
      body: "BACK",
      css: `background:rgba(22,22,22,.5)`,
   },
   {
      name: "right",
      body: "RIGHT",
      css: `background:rgba(220,220,220,.5); 
               border:1px solid #ddd`,
   },
];

Global (face):

If the name parameter in the faces array is indicated (ie: "front") but css and / or body are not. The global default(below) will satisfy those parameters.

interface GlobalType {
   css?: string;
   body?: string;
}
const global: GlobalType = {
   body: "BODY FOR FACE WHICH DOES NOT CONTAIN BODY",
   css: "color:red",
};

• https://www.npmjs.com/package/anim-3d-obj

Features

• 🎨 Pure CSS-based 3D object rendering
• ⚡ Zero dependencies (other than React)
• 🛠 Fully customizable width, height, depth, and colors
• 🌀 Built-in animation support
• 🌍 SSR-safe (works with Next.js, Remix, etc.)

Peer requirements

React 18+. Works in Vite, CRA, Next.js (SSR-safe), Remix, etc.

Installation

npm install anim-3d-obj
# or
yarn add anim-3d-obj
# or
pnpm add anim-3d-obj

import React from "react";
import { Obj } from "anim-3d-obj";

Full Example

function App() {
  const global = {
    css: "border: 1px solid #00f; color:#00f; backface-visibility: visible; text-align:center; line-height: 120px; font-size: 14px;",
    body: "height: 120px; width: 120px;",
  };

  return (
    <Obj
      depth="120px"
      height="120px"
      width="120px"
      perspective="800px"
      rotation="x 1s linear infinite"
      global={global}
    >
      Hello 3D
    </Obj>
  );
}

export default App;

Props

The <Obj /> component accepts the following props:

| Prop | Type | Default | Description | | ----------- | ------ | --------- | ------------------------------------------------------------------------------ | | width | string | "100px" | Width of the object. | | height | string | "100px" | Height of the object. | | depth | string | "100px" | Depth of the object (3rd dimension). | | perspective | string | "600px" | Perspective distance for 3D rendering. | | rotation | string | undefined | CSS animation shorthand for rotating the object (e.g. "x 1s linear infinite"). | | global | object | {} | Global styles for all faces (css for shared CSS, body for dimensions). |

Tips

• You can pass any React children inside <Obj> ... </Obj> to render content on the front face.
• Combine with CSS variables or Tailwind utilities for theming.
• Works with server-side rendering (SSR) — no window dependency.