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

npm install apple-intelligence-glow

Usage

Basic Usage

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

<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:

<!-- 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.

// 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.

// 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