@codeweaver/wordart
v1.0.1
Published
A customizable, animated word art web component built with Svelte. Perfect for adding eye-catching text animations to your web applications.
Downloads
120
Maintainers
bhattjay897Readme
@codeweaver/wordart
A customizable, animated word art web component built with Svelte. Perfect for adding eye-catching text animations to your web applications.
Features
- 🎨 Multiple stylish fonts from Google Fonts
- 🌈 Customizable colors with smooth transitions
- ⚡ Smooth wave animations
- 📏 Adjustable size and animation speed
- 🔠 Optional automatic uppercase conversion
- 🎯 Zero dependencies (except Svelte)
- 📦 Lightweight and performant
- 🌐 Works in any web application
Installation & Usage
NPM Package
npm install @codeweaver/wordart// Import in your JavaScript/TypeScript file
import "@codeweaver/wordart";
// Use in your HTML
<wordart-widget name="Hello World"></wordart-widget>;Direct Script Usage
Method 1: UMD Build (Recommended for basic usage)
<!-- Load Svelte first -->
<script src="https://unpkg.com/svelte@4"></script>
<!-- Load our component -->
<script src="https://unpkg.com/@codeweaver/[email protected]/wordart.umd.js"></script>
<!-- Use the component -->
<wordart-widget
name="Hello World"
size="3"
speed="2"
color1="#ff3e00"
color2="#40b3ff"
></wordart-widget>Method 2: ES Module
<script type="module">
import "@codeweaver/wordart/wordart.es.js";
</script>
<wordart-widget name="Hello World"></wordart-widget>Method 3: Using specific version from CDN
<!-- Latest version -->
<script src="https://unpkg.com/@codeweaver/wordart"></script>
<!-- Specific version -->
<script src="https://unpkg.com/@codeweaver/[email protected]/wordart.umd.js"></script>Framework Integration
Svelte
<script>
import '@codeweaver/wordart';
</script>
<wordart-widget name="Hello Svelte!"></wordart-widget>React
import "@codeweaver/wordart";
function App() {
return (
<wordart-widget name="Hello React!" size="3" speed="2"></wordart-widget>
);
}Vue
<template>
<wordart-widget name="Hello Vue!" size="3" speed="2"></wordart-widget>
</template>
<script>
import "@codeweaver/wordart";
export default {
name: "App",
};
</script>Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WordArt Demo</title>
<!-- Required Dependencies -->
<script src="https://unpkg.com/svelte@4"></script>
<script src="https://unpkg.com/@codeweaver/[email protected]/wordart.umd.js"></script>
</head>
<body>
<h1>WordArt Demo</h1>
<!-- Basic Usage -->
<wordart-widget
name="Hello World"
size="3"
speed="2"
color1="#ff3e00"
color2="#40b3ff"
shouldConvertToUpperCase="false"
></wordart-widget>
<!-- Interactive Example -->
<script>
// You can dynamically update properties
const widget = document.querySelector("wordart-widget");
// Update text after 2 seconds
setTimeout(() => {
widget.setAttribute("name", "Dynamic Update!");
widget.setAttribute("color1", "#00ff00");
}, 2000);
</script>
</body>
</html>Properties
| Property | Type | Default | Description |
| -------------------------- | ------- | ----------------------- | ----------------------------- |
| name | string | "" | Text to be displayed |
| size | string | "3" | Font size in rem units |
| speed | string | "2" | Animation duration in seconds |
| color1 | string | "#ff3e00" | Primary color |
| color2 | string | "#40b3ff" | Secondary color |
| font | string | "Rubik Doodle Shadow" | Font family |
| shouldConvertToUpperCase | boolean | false | Convert text to uppercase |
Available Fonts
- Rubik Doodle Shadow (default)
- Bungee Shade
- Nabla
- Pixelify Sans
- Rubik Vinyl
Font Dependencies
The widget uses Google Fonts. If you're using CSP (Content Security Policy), make sure to allow:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Nabla&family=Pixelify+Sans&family=Rubik+Doodle+Shadow&family=Rubik+Vinyl&display=swap"
rel="stylesheet"
/>Development
Clone and install dependencies:
git clone https://github.com/jaywalker21/wordart.git
cd wordart
npm installAvailable scripts:
# Start development server with demo
npm run dev
# Build the library
npm run build:lib
# Build the demo site
npm run build:demo
# Preview the built demo
npm run preview:demo
# Type checking
npm run checkProject Structure
.
├── src/
│ ├── lib/ # Library source code
│ │ ├── WordArt.svelte # Main component
│ │ └── index.ts # Library entry point
│ ├── demo/ # Demo site source
│ │ └── App.svelte # Demo page
│ └── main.ts # Demo entry point
├── dist/ # Built library output
├── demo-dist/ # Built demo site
└── package.jsonDemo
Browser Support
Supports all modern browsers that implement the Custom Elements v1 specification:
- Chrome
- Firefox
- Safari
- Edge
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
MIT License - see the LICENSE file for details.
Credits
- Built with Svelte
- Fonts from Google Fonts
- Created by Jay
Made with ❤️ using Claude