apple-intelligence-glow/README.md

A JavaScript and CSS implementation of the Apple Intelligence border glow effect

# Apple Intelligence Border Glow Effect

A JavaScript and CSS implementation of the Apple Intelligence border glow effect with continuous color coverage around the entire border.

## Installation

```bash
npm install apple-intelligence-glow
```

## Usage

### Basic Usage

```javascript
import BorderGlowEffect from 'apple-intelligence-glow';

// Initialize with default options
const borderGlow = new BorderGlowEffect();

// Or with custom options
const customBorderGlow = new BorderGlowEffect({
    containerId: 'myContainer',
    colorScheme: 'blue',
    animated: true
});
```

### HTML Structure

```html
<div class="border-glow-container color-scheme-default animated">
    <div class="content-area">
        <!-- Your app content goes here -->
        <div class="app-content">
            <div class="app-logo">App Name</div>
            <div class="app-description">Your application description</div>
            <button class="app-button">Get Started</button>
        </div>
    </div>
</div>
```

The library will automatically add the necessary glow layers to create the border effect.

### Available Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| containerId | string | null | ID of the container element. If null, all elements with class 'border-glow-container' will be initialized. |
| colorScheme | string | 'default' | Color scheme to use. Options: 'default', 'blue', 'green' |
| animated | boolean | true | Whether the border should be animated |

### Available Color Schemes

- `color-scheme-default` - Purple to Orange gradient
- `color-scheme-blue` - Blue to Pink gradient
- `color-scheme-green` - Green to Yellow gradient

### Size Variations

The library includes several predefined size variations:

```html
<!-- Default (Phone) -->
<div class="border-glow-container color-scheme-default animated">
    <!-- content -->
</div>

<!-- Small Phone -->
<div class="border-glow-container border-glow-small color-scheme-default animated">
    <!-- content -->
</div>

<!-- Tablet -->
<div class="border-glow-container border-glow-tablet color-scheme-default animated">
    <!-- content -->
</div>

<!-- Laptop (No border radius) -->
<div class="border-glow-container border-glow-laptop color-scheme-default animated">
    <!-- content -->
</div>
```

### Methods

#### setColorScheme(container, scheme)

Changes the color scheme of a specific container.

```javascript
// Get a reference to your BorderGlowEffect instance
const borderGlow = new BorderGlowEffect();

// Get a reference to your container
const container = document.getElementById('myContainer');

// Change the color scheme
borderGlow.setColorScheme(container, 'blue');
```

#### toggleAnimation(paused)

Pauses or resumes the animation.

```javascript
// Get a reference to your BorderGlowEffect instance
const borderGlow = new BorderGlowEffect();

// Pause the animation
borderGlow.toggleAnimation(true);

// Resume the animation
borderGlow.toggleAnimation(false);
```

## Browser Support

This library uses modern CSS features and is compatible with all modern browsers:

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

ISC