https://github.com/brunnolou/glowing
Beautiful AI like Glowing Border Effects 💫 around HTML elements.
https://github.com/brunnolou/glowing
ai apple border css effect effects glowing library ring siri typescript
Last synced: 6 days ago
JSON representation
Beautiful AI like Glowing Border Effects 💫 around HTML elements.
- Host: GitHub
- URL: https://github.com/brunnolou/glowing
- Owner: brunnolou
- Created: 2024-12-25T00:09:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-24T20:42:03.000Z (about 1 year ago)
- Last Synced: 2025-06-21T09:09:34.715Z (10 months ago)
- Topics: ai, apple, border, css, effect, effects, glowing, library, ring, siri, typescript
- Language: TypeScript
- Homepage: https://ai-glowing.vercel.app/
- Size: 49.8 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AI Glowing effects 💫
A modern TypeScript library for creating beautiful glowing border effects around HTML elements.
## Installation
```bash
npm add glowing
yarn add glowing
pnpm add glowing
```
## Usage
```ts
import 'glowing/dist/index.css';
import { Glowing } from 'glowing'
// Create a glowing effect around an element
const element = document.querySelector('.my-element')
const glow = new Glowing(element, options)
// Control methods
glow.show() // Show the glow effect
glow.hide() // Hide the glow effect
glow.toggle() // Toggle visibility
glow.remove() // Remove the glow effect completely
```
```ts
// Set options
glow.setOptions({
// Animation duration in ms
rotationDuration: 2000,
// Glow width in pixels
width: 4,
// Blend mode for the glow effect
blendMode: 'color-dodge',
// Custom gradient colors
colors: ['cyan', 'purple', 'tomato'],
// Additional gradient colors
colors2: ['white', 'transparent', 'transparent', 'white', 'transparent', 'transparent', 'white'],
// Blur intensity of the glow
glowingBlurRatio: 1.5,
// Optional timeout to auto-hide the glow (in ms)
timeout: 3000,
// Optional border radius override
borderRadius: 8,
})
```
## Development
- `npm run dev` - Start development server with hot reload
- `npm run build` - Build the package for production
- `npm test` - Run tests
- `npm run format` - Format all files using Prettier
- `npm run format:check` - Check if files are properly formatted
## TypeScript Support
This package includes TypeScript type definitions. No additional @types packages are needed.
## Browser Support
The package is built for modern browsers and includes:
- ES Modules build
- CommonJS build
- TypeScript declarations
- Source maps
## License
MIT