3d-grass-title

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

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