apple-intelligence-glow

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