Back to packageRELEASE DETAILS

1.0.0

npm

3d-grass-title

A customizable 3D grass-textured title web component using Lit + TypeScript + Three.js

Published17 Jul 2025

Direct dependencies10

Transitive dependenciesNot calculated

README

Current package documentation

3D Grass Title

A customizable 3D grass-textured title web component using Lit + TypeScript + Three.js.

Features

Grass Shader: Realistic grass-like displacement and coloring with animated wind effects
Customizable: Full control over text, color, lighting, rotation, and camera position
Responsive: Automatically adapts to container size and device pixel ratio
Performance: Optimized Three.js rendering with efficient shader materials
TypeScript: Full TypeScript support with type definitions
Web Components: Standard web component API, works with any framework

Installation

npm install 3d-grass-title

Usage

Basic Usage

<script type="module">
	import '3d-grass-title';
</script>

<grass-title text="Your Title Here"></grass-title>

With Custom Properties

<grass-title
	text="Columbus Reclaimed"
	color="#66ff99"
	light-intensity="2"
	rotation="[0, 0.3, 0]"
	camera-distance="6"
	link="https://example.com"
></grass-title>

Properties

Property	Type	Default	Description
`text`	`string`	`'Welcome'`	The text to display
`color`	`string`	`'#33ff33'`	Base color of the grass shader
`lightIntensity`	`number`	`1.2`	Intensity of the directional light
`rotation`	`[number, number, number]`	`[0, 0, 0]`	Rotation angles in radians [x, y, z]
`cameraDistance`	`number`	`6`	Distance of the camera from the text
`fontUrl`	`string`	`undefined`	URL to a custom Three.js font JSON file
`link`	`string`	`undefined`	URL to navigate to when clicked (with particle spread animation)

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Build demo site
npm run build:demo

# Type check
npm run typecheck

Demo

Visit the live demo to see the component in action and experiment with different settings.

License

MIT

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 10

Native requirements

10 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
lit Environment { "local_name": "lit", "alias": false, "peer_metadata": null }	`^3.0.0`	runtime
three Environment { "local_name": "three", "alias": false, "peer_metadata": null }	`^0.158.0`	runtime
vite Environment { "local_name": "vite", "alias": false, "peer_metadata": null }	`^5.0.0`	development
dotenv Environment { "local_name": "dotenv", "alias": false, "peer_metadata": null }	`^17.2.0`	development
vitest Environment { "local_name": "vitest", "alias": false, "peer_metadata": null }	`^1.0.0`	development
happy-dom Environment { "local_name": "happy-dom", "alias": false, "peer_metadata": null }	`^12.0.0`	development
typescript Environment { "local_name": "typescript", "alias": false, "peer_metadata": null }	`^5.0.0`	development
@types/node Environment { "local_name": "@types/node", "alias": false, "peer_metadata": null }	`^24.0.14`	development
@types/three Environment { "local_name": "@types/three", "alias": false, "peer_metadata": null }	`^0.158.0`	development
vite-plugin-dts Environment { "local_name": "vite-plugin-dts", "alias": false, "peer_metadata": null }	`^3.6.0`	development

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "shasum": "e0b82c06c5a308dd780f2b1e32cd1d69f2441d1e",
  "tarball": "https://registry.npmjs.org/3d-grass-title/-/3d-grass-title-1.0.0.tgz",
  "fileCount": 10,
  "integrity": "sha512-3pwmT8hQUKkmHD5CPPGGEn5+1CiMiJFUye9zHL0JbcWBhd5JSYLT/MYN9bwto9ClbFcbdcEpjJ+xXGoHvyZVKw==",
  "signatures": [
    {
      "sig": "MEQCIANgFGW4MCFrjX+TbawC+22WQNdPVIFEv8yayZ2vihrGAiBJudI2qLUMmwJ26ya6V1qn3V8929Fw+Bm1kmIDoMp9pw==",
      "keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"
    }
  ],
  "unpackedSize": 5250756
}