Security News
US Government Forces Anthropic to Pull Claude Fable Days After Launch
Anthropic says the directive cited national security concerns over a narrow jailbreak, but offered no specific technical details.
By Sarah Gooding - Jun 13, 2026
Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
cube-3d-js
Advanced tools
cube-3d-js
Provides a 3D cube carousel display with perspective.
Installation
You can install this library using npm:
npm install cube-3d-js
Usage
HTML
<body>
<div id="cube-3d">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
</div>
<style>
#cube-3d-base > div {
box-sizing: border-box;
border: 0.5px solid black;
color: blue;
background-color: rgb(255 255 255 / 0.5);
}
</style>
</body>
JavaScript
import { init, onRotate, getFaceByIndex } from "cube-3d";
// Initialize the library with optional configuration
init("cube-3d", {
width: 500,
height: 500,
initialRotation: 0,
});
// Register a callback for when the rotation changes
onRotate((currentFaceIndex: number, previousFaceIndex: number) => {
// Your callback logic here
console.log(
`Face index changed from: ${previousFaceIndex} to: ${currentFaceIndex}`
);
});
// Retrieve a specific face element by index
const faceElement = getFaceByIndex(1);
API Documentation
init(targetId: string, config?: Cube3DConfig)
Initializes the application with optional configuration parameters.
targetId(string, optional): The ID of the target element (default iscube-3d).config(object, optional): Optional configuration object for width, height, baseId, initialRotation, intensity, scrollIntensity, and swipeIntensity.
Config
| Property Name | Description | Default Value |
|---|---|---|
width | Sets the width. | 500 |
height | Sets the height. | 500 |
baseId | Sets the baseElement ID. | cube-3d-base |
initialRotation | Sets the initial rotation degree. | 0 |
intensity | Sets the intensity of light. | 0.2 |
scrollIntensity | Sets the intensity of light on scroll. | 1.5 |
swipeIntensity | Sets the intensity of light on swipe. | 75 |
onRotate(callback: (currentFaceIndex: number, previousFaceIndex: number) => void)
Registers a callback function to be executed when the rotation changes.
callback(function): A function to call when the rotation changes with the detected face index and the previous face index.
getFaceByIndex(index: number): HTMLElement
Retrieves a specific face element by its index.
index(number): The index of the face element to retrieve.- Returns: The element corresponding to the specified index.
License
This project is licensed under the MIT License - see the LICENSE file for details.
FAQs
Provides a 3D cube carousel display with perspective.
We found that cube-3d-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 12 Sep 2024
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
152 Chrome Live Wallpaper Extensions Hid Ad Tracking and Faked Google Search Traffic
A network of 152 Chrome live wallpaper extensions hid ad tracking and made extension-driven traffic look like Google search clicks.
By Kush Pandya - Jun 12, 2026
Company News
Andrew Becherer Joins Socket as Chief Information Security Officer
Socket’s first CISO brings deep experience securing high-growth SaaS companies as open source supply chain threats accelerate.
By Sarah Gooding - Jun 11, 2026