iOS 18 Siri Glowing Effect

Premium React component featuring the iconic iOS 18 Siri glowing animation

An elegant and performant React component that replicates the distinctive wide glowing effect from Siri in iOS 18. This effect creates a smooth, rotating gradient with gentle pulsing that gives your applications a premium, modern appearance.

🎬 Demo

The authentic iOS 18 Siri glowing effect in action

✨ Features

• 🎨 iOS 18 Siri Design - Authentic recreation of the wide glowing effect from iOS 18
• 🌈 4 Custom Colors - Electric blue, violet-pink, red, and orange
• 💫 Individual Intensities - Each color has its own pulse intensity
• 🔄 Random Pulsing - 70% single pulse, 30% double pulse for natural effect
• ⚡ Optimized Performance - Uses requestAnimationFrame and CSS animations
• 📦 Zero Dependencies - No external dependencies except React
• 🎯 TypeScript Ready - Full TypeScript support
• 📱 Responsive - Works perfectly on all screen sizes

📦 Installation

npm install @bit.rhplus/glowing-edge

or using yarn:

yarn add @bit.rhplus/glowing-edge

or using pnpm:

pnpm add @bit.rhplus/glowing-edge

🚀 Quick Start

import React from 'react';
import GlowingEdge from '@bit.rhplus/glowing-edge/_src';

function App() {
  const [loading, setLoading] = React.useState(true);

  return (
    <GlowingEdge loading={loading}>
      <div style={{ padding: '40px', minHeight: '300px' }}>
        <h1>My Content</h1>
        <p>This content is wrapped with iOS 18 Siri glowing effect</p>
      </div>
    </GlowingEdge>
  );
}

export default App;

📖 API

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | loading | boolean | false | Enables/disables the glowing effect | | children | ReactNode | - | Content to be wrapped with the effect | | className | string | '' | CSS class for the wrapper element |

Basic Usage

import GlowingEdge from '@bit.rhplus/glowing-edge/_src';

// Simple wrapper with effect
<GlowingEdge loading={true}>
  <YourContent />
</GlowingEdge>

// With custom CSS class
<GlowingEdge loading={isLoading} className="my-custom-class">
  <YourContent />
</GlowingEdge>

// Conditional display
<GlowingEdge loading={data.isProcessing}>
  <DataTable data={data} />
</GlowingEdge>

🎨 Design Specification

Colors

The component uses 4 carefully selected colors inspired by iOS 18:

1. Electric Blue #0f00ff - HSL(244°, 100%, 50%)
2. Violet-Pink #ae1b6e - HSL(325°, 72%, 39%)
3. Red #cf0000 - HSL(0°, 100%, 41%)
4. Orange #ff9f10 - HSL(37°, 100%, 53%)

Animation

• Rotation Speed: 3000-3200ms for smooth, slow movement
• Gradient Width: 60° (vs traditional 10°) for wide, characteristic appearance
• Pulse Interval: 5000ms between individual pulses
• Pulse Probability: 70% single pulse, 30% double pulse

Individual Pulse Intensities

Each color has its own pulseScale for authentic iOS 18 effect:

• Blue: 0.8 - Gentlest pulse
• Orange: 1.0 - Medium-small pulse
• Red: 1.2 - Medium-large pulse
• Violet-Pink: 1.4 - Most prominent pulse

💡 Usage Examples

Loading State

import { useState, useEffect } from 'react';
import GlowingEdge from '@bit.rhplus/glowing-edge/_src';

function DataFetcher() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => {
      setData(result);
      setLoading(false);
    });
  }, []);

  return (
    <GlowingEdge loading={loading}>
      <div className="data-container">
        {loading ? 'Loading...' : <DataDisplay data={data} />}
      </div>
    </GlowingEdge>
  );
}

Processing State

function FormWithProcessing() {
  const [isProcessing, setIsProcessing] = useState(false);

  const handleSubmit = async (formData) => {
    setIsProcessing(true);
    try {
      await submitForm(formData);
    } finally {
      setIsProcessing(false);
    }
  };

  return (
    <GlowingEdge loading={isProcessing}>
      <form onSubmit={handleSubmit}>
        {/* Your form */}
      </form>
    </GlowingEdge>
  );
}

Card Component

function PremiumCard({ title, children, isActive }) {
  return (
    <GlowingEdge loading={isActive} className="premium-card">
      <div className="card-content">
        <h2>{title}</h2>
        {children}
      </div>
    </GlowingEdge>
  );
}

Dashboard Widget

function LiveDataWidget({ data, isLive }) {
  return (
    <GlowingEdge loading={isLive}>
      <div className="widget">
        <h3>Live Data</h3>
        <div className="data-value">{data.value}</div>
        <div className="data-label">{data.label}</div>
      </div>
    </GlowingEdge>
  );
}

🎯 Best Practices

When to Use

✅ Recommended:

• Loading states while fetching data
• Processing states during operations
• Premium features or premium content
• Live/active states (e.g., live streaming, real-time data)
• Highlighting important sections
• Dashboards and analytics
• AI assistants or chatbots (Siri-like interface)

❌ Not Recommended:

• Static content without interaction
• Too frequent or unnecessary use (effect loses meaning)
• Small elements (buttons, icons) - effect requires sufficient space
• Text-heavy content where effect disrupts readability

Performance Tips

// ✅ Good - effect only when needed
<GlowingEdge loading={isActuallyLoading}>
  <Content />
</GlowingEdge>

// ❌ Bad - effect always active
<GlowingEdge loading={true}>
  <Content />
</GlowingEdge>

// ✅ Good - conditional rendering
{showGlowEffect && (
  <GlowingEdge loading={true}>
    <Content />
  </GlowingEdge>
)}

Styling

The component creates a wrapper with the following structure:

<div class="ios18-wrapper-a2 your-custom-class">
  <!-- Your content -->
  <div>
    {children}
  </div>

  <!-- Glowing effects -->
  <span class="ios18-glow-a2"></span>
  <span class="ios18-glow-a2"></span>
  <span class="ios18-glow-a2"></span>
  <span class="ios18-glow-a2"></span>
</div>

Custom Styling

/* Customize wrapper */
.ios18-wrapper-a2 {
  /* Wrapper has position: relative */
  /* You can add custom border-radius, padding, etc. */
}

/* Customize only your custom wrapper */
.my-custom-class {
  border-radius: 20px;
  padding: 30px;
}

/* Content inside */
.my-custom-class > div:first-of-type {
  /* Your content here */
}

🔧 Advanced Usage

With TypeScript

import React, { ReactNode } from 'react';
import GlowingEdge from '@bit.rhplus/glowing-edge/_src';

interface MyComponentProps {
  children: ReactNode;
  isActive: boolean;
  className?: string;
}

const MyComponent: React.FC<MyComponentProps> = ({
  children,
  isActive,
  className
}) => {
  return (
    <GlowingEdge loading={isActive} className={className}>
      {children}
    </GlowingEdge>
  );
};

export default MyComponent;

With Styled Components

import styled from 'styled-components';
import GlowingEdge from '@bit.rhplus/glowing-edge/_src';

const StyledWrapper = styled(GlowingEdge)`
  margin: 20px;

  & > div:first-of-type {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    padding: 40px;
    border-radius: 16px;
  }
`;

function MyComponent() {
  return (
    <StyledWrapper loading={true}>
      <h1>Stylovaný obsah</h1>
    </StyledWrapper>
  );
}

With CSS Modules

import styles from './MyComponent.module.css';
import GlowingEdge from '@bit.rhplus/glowing-edge/_src';

function MyComponent() {
  return (
    <GlowingEdge loading={true} className={styles.glowingContainer}>
      <div className={styles.content}>
        {/* Obsah */}
      </div>
    </GlowingEdge>
  );
}

🌐 Browser Support

• Chrome/Edge 88+
• Firefox 87+
• Safari 14+
• Opera 74+
• iOS Safari 14+
• Chrome Android 88+

Required CSS Features:

• CSS Custom Properties (CSS Variables)
• CSS conic-gradient
• CSS backdrop-filter
• CSS mix-blend-mode
• CSS @keyframes animations

⚡ Performance

The component is optimized for performance:

• GPU Acceleration: Uses transform: translateZ(0) for hardware acceleration
• RequestAnimationFrame: Smooth 60fps animations
• CSS Animations: Pulsing via CSS keyframes instead of JavaScript
• Conditional Rendering: Effects render only when loading={true}
• No Re-renders: CSS variables updated directly without component re-render

Performance Metrics

• Initial Load: ~2kb gzipped
• Runtime Memory: ~4MB (4 glowing effects)
• CPU Usage: <1% at 60fps
• Animation Smoothness: Constant 60fps

🐛 Troubleshooting

Effect not showing

// Make sure loading={true}
<GlowingEdge loading={true}>
  <Content />
</GlowingEdge>

// Check if wrapper has sufficient size
<GlowingEdge loading={true}>
  <div style={{ minHeight: '200px', minWidth: '300px' }}>
    <Content />
  </div>
</GlowingEdge>

Effect is too intense

The effect is designed for dark backgrounds. On light backgrounds it may be too prominent:

// Use dark background for content
<GlowingEdge loading={true}>
  <div style={{
    background: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
    padding: '40px'
  }}>
    <Content />
  </div>
</GlowingEdge>

Z-index issues

/* If glowing effect shows under other content */
.ios18-wrapper-a2 {
  position: relative;
  z-index: 1;
}

/* Or set higher z-index for your custom wrapper */
.my-custom-class {
  z-index: 10;
}

📝 Changelog

v2.0.0 (2025-01-21)

• ✨ Complete rewrite to iOS 18 Siri design
• 🎨 4 custom colors (blue, violet-pink, red, orange)
• 💫 Individual pulse intensities for each color
• 🔄 Random single/double pulse (70%/30%)
• ⚡ Optimized performance with GPU acceleration
• 📦 Simplified API - only loading and children props
• 🎯 Wider gradient (60° vs 10°)
• 🌊 Slower, smoother animations

v1.0.0 (2024-12-15)

• 🎉 Initial release
• 7 different glowing effects
• Configurable speeds and colors
• Light/Dark theme support

🤝 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT © RhPlus

🙏 Credits

• Inspired by Siri design from iOS 18 by Apple Inc.
• Created by RhPlus team
• Based on the original GlowingEdge component

📞 Support

• 🐛 Report Bug
• 💡 Request Feature
• 📧 Email: [email protected]
• 💬 Discord: Join our community
• ☕ Buy me a coffee - Support the development!

🔗 Links

• NPM Package
• GitHub Repository
• Documentation

Made with ❤️ by RhPlus