codefabric
v1.0.0
Published
An interactive web component that renders text as a severable 2D physics curtain
Maintainers
arunsinghpundirReadme
🕸️ codefabric
"An interactive web component that renders text as a severable 2D physics curtain."
codefabric is a native Web Component that turns text into a tearable, interactive 2D physics curtain. Built from strings of characters rather than a canvas image, it creates a dynamic visual effect that feels alive, responsive, and playful across modern web apps.
📦 Installation
npm install codefabric🚀 Usage
Vanilla HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>codefabric Demo</title>
</head>
<body>
<code-fabric
words="function helloWorld() { console.log('Hello, world!'); }"
color="#111"
sensitivity="1"
width="100%"
height="100%"
></code-fabric>
<script src="node_modules/codefabric/index.js"></script>
</body>
</html>React
import React from "react";
import "codefabric";
export default function App() {
return (
<code-fabric
words="function helloWorld() { console.log('Hello, world!'); }"
color="#111"
sensitivity={1}
width="100%"
height="100%"
/>
);
}Angular
import { Component } from "@angular/core";
import "codefabric";
@Component({
selector: "app-root",
template: `
<code-fabric
words="function helloWorld() { console.log('Hello, world!'); }"
color="#111"
[attr.sensitivity]="1"
width="100%"
height="100%"
></code-fabric>
`,
})
export class AppComponent {}⚙️ Configuration Attributes
| Attribute | Type | Default | Description |
| ------------- | ------ | -------------------------- | ----------------------------------------------------------- |
| words | String | "function helloWorld()..." | The text content used to generate the curtain mesh. |
| color | String | "#111" | The color used for the rendered text. |
| sensitivity | Number | 1 | Controls how strongly the curtain reacts to mouse movement. |
| width | String | "100%" | Width of the component area. |
| height | String | "100%" | Height of the component area. |
🖱️ Interaction
Users can hover and move their pointer across the mesh to interact with the text curtain, and click and drag to tear the text constraints apart.
📄 License
This project uses the MIT License.
Created by Arun Singh Pundir.