🍎 Smooth Corner - iOS-Style Continuous Corner Radius

A high-performance React component that creates iOS-style continuous corner radius with WebAssembly acceleration. Perfect for creating smooth, premium UI elements that scale beautifully.

✨ Features

• 🚀 WebAssembly Acceleration - Up to 3.3x faster calculations (~10M+ vs ~3M calculations/second)
• 🍎 iOS-Style Continuous Corners - Authentic Apple-style corner radius with proper mathematical curves
• ⚡ High Performance - Optimized for thousands of elements with SVG pooling and batched updates
• 🎨 Drop Shadow Support - Proper shadow rendering that isn't clipped by corner paths
• 📱 Pixel-Based API - Intuitive radius values in pixels (4px, 8px, 16px, etc.)
• 🔄 Automatic Fallback - Seamlessly falls back to optimized JavaScript if WebAssembly fails
• 💫 Dynamic Sizing - Automatically scales with container dimensions
• 🎯 Zero Dependencies - Only requires React 18+

🆕 What's New in 1.2.7

• ♻️ Path memo cache (256 FIFO) reuses identical corner paths.
• 🧪 Single reusable WASM CornerCalculator instance (no per-call construction).
• 🔀 Multi-URL WASM fallback: tries bundle-relative then /wasm/ path.
• 🧩 Optimized JS fallback path generator with fewer allocations.
• 📊 Enhanced getStats() now returns { wasmLoaded, cacheSize, wasmInternalCache, mode }.
• 🛡️ Graceful aggregated error reporting when all WASM URLs fail.

🚀 Installation

npm install smooth-corner-react

📖 Quick Start

import React from 'react';
import { Siv } from 'smooth-corner-react';

function App() {
  return (
    <div>
      {/* Basic usage */}
      <Siv radius={16} className="bg-blue-500 text-white p-4">
        Beautiful smooth corners!
      </Siv>
      
      {/* With drop shadow */}
      <Siv 
        radius={24} 
        className="bg-white p-6"
        dropShadow="0 10px 25px rgba(0, 0, 0, 0.1)"
      >
        Card with perfect shadows
      </Siv>
      
      {/* Large container */}
      <Siv radius={40} className="bg-gradient-to-r from-purple-500 to-pink-500">
        <div className="p-8 text-white text-center">
          <h2 className="text-2xl font-bold">Hero Section</h2>
          <p>Large containers look amazing with 40px+ radius</p>
        </div>
      </Siv>
    </div>
  );
}

🎛️ API Reference

Siv Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | radius | number | Required | Corner radius in pixels (4px, 8px, 16px, etc.) | | children | ReactNode | - | Content to render inside the component | | className | string | - | CSS classes to apply | | style | CSSProperties | - | Inline styles | | dropShadow | string | - | CSS drop-shadow filter value |

Utility Functions

import { getStats, initWasm, clearCache } from 'smooth-corner-react';

// Optional eager WASM initialization (array = ordered fallback list)
await initWasm([
  './wasm/corner_calculator.js',
  '/wasm/corner_calculator.js'
]);

// Stats now include path memo cache info
const stats = getStats();
// { wasmLoaded: boolean, cacheSize: number, wasmInternalCache: number, mode: 'WebAssembly' | 'JavaScript (Optimized)' }
console.log(stats);

// Clear memo + (if present) internal WASM cache
clearCache();

📊 Performance Monitoring

Monitor performance in real-time with the built-in dashboard:

import { WasmStatus, PerformanceDashboard } from 'smooth-corner-react';

function App() {
  return (
    <div>
      <WasmStatus /> {/* Shows WASM status indicator */}
      <PerformanceDashboard /> {/* Detailed performance metrics */}
    </div>
  );
}

🎨 Design Guidelines

Recommended Radius Values

| Use Case | Radius | Example | |----------|--------|---------| | Small buttons | 4-8px | Toggle switches, pills | | UI cards | 12-16px | Content cards, panels | | Large containers | 20-32px | Hero sections, modals | | Premium elements | 40px+ | Feature highlights, CTAs |

Drop Shadow Best Practices

// Subtle UI shadows
<Siv dropShadow="0 1px 3px rgba(0, 0, 0, 0.1)" />

// Card elevation
<Siv dropShadow="0 4px 6px rgba(0, 0, 0, 0.1)" />

// Prominent elements
<Siv dropShadow="0 25px 25px rgba(0, 0, 0, 0.15)" />

⚡ Performance Features

WebAssembly Acceleration

• Automatic WASM loading for 3.3x performance boost
• Graceful fallback to optimized JavaScript
• Cache management for repeated calculations

Optimization Systems

• SVG Pooling: 70% DOM reduction for mass usage
• ResizeObserver Batching: 50% performance improvement
• Path Memo Cache: Reuses previously generated paths (new in 1.2.6)
• Single WASM Instance: Eliminates repeated constructor overhead (new in 1.2.6)
• React.memo: 40-60% render reduction

WASM Loading Behavior

1. First call to a path function triggers lazy initWasm() automatically (unless you already called it).
2. Each candidate URL is attempted in order; first success stops the loop.
3. All failures result in optimized JavaScript mode; your UI continues seamlessly.
4. The memo cache works for both JS and WASM paths.
5. Call clearCache() to force regeneration (e.g., memory-sensitive contexts).

When to eager load: app splash screens, dashboards with many Siv mounts, or when you want to measure JS vs WASM deterministically.

🛠️ Advanced Usage

Mass Performance Testing

function MassTest() {
  const [count, setCount] = useState(100);
  
  return (
    <div>
      <input 
        type="range" 
        min="10" 
        max="1000" 
        value={count}
        onChange={(e) => setCount(e.target.value)}
      />
      
      <div className="grid grid-cols-10 gap-2">
        {Array.from({ length: count }, (_, i) => (
          <Siv 
            key={i}
            radius={Math.random() * 20 + 4}
            className="bg-blue-500 h-20"
          />
        ))}
      </div>
    </div>
  );
}

Custom Animations

function AnimatedCorner() {
  const [radius, setRadius] = useState(8);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setRadius(r => r >= 32 ? 8 : r + 2);
    }, 200);
    
    return () => clearInterval(interval);
  }, []);
  
  return (
    <Siv 
      radius={radius}
      className="bg-purple-500 w-32 h-32 transition-all duration-200"
    />
  );
}

🧪 Browser Support

• Modern Browsers: Full WebAssembly support
• Legacy Browsers: Automatic JavaScript fallback
• Mobile: Optimized for iOS Safari and Chrome
• SSR: Server-side rendering compatible

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © Your Name

🙏 Acknowledgments

• Inspired by iOS design language
• WebAssembly optimization techniques
• React community best practices

Made with ❤️ for the React community