Hyperellipse

https://hyperellipse.vercel.app
Admin
Hyperellipse is a CSS corner-shape polyfill that provides consistent squircle and superellipse...
Tokens:3,796
Snippets:53
Trust Score:7.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Quick start installation

Source: https://hyperellipse.vercel.app

Install the package using npm.

```bash
npm i hyperellipse
```

--------------------------------

### Installation commands

Source: https://hyperellipse.vercel.app

Installation commands for various package managers.

```bash
npm install hyperellipse
```

```bash
pnpm add hyperellipse
```

```bash
yarn add hyperellipse
```

```bash
bun add hyperellipse
```

--------------------------------

### Agent skill installation

Source: https://hyperellipse.vercel.app

Install the Agent Skill for coding agents.

```bash
npx skills add mikhailmogilnikov/hyperellipse@hyperellipse
```

--------------------------------

### Register hyperellipse in Astro

Source: https://hyperellipse.vercel.app

Initialize the polyfill in an Astro layout file.

```javascript
---
// Layout.astro
---

<script>
  import { registerHyperellipse } from "hyperellipse";

  registerHyperellipse();
</script>
```

--------------------------------

### Initialize hyperellipse controller

Source: https://hyperellipse.vercel.app

Register the polyfill using the JavaScript API. This method is idempotent and safe for server-side rendering.

```javascript
import { registerHyperellipse } from "hyperellipse";

const controller = registerHyperellipse({
  selector: ".card", // extra selectors (cross-origin sheets)
  pendingRadiusScale: 0.6, // radius scale after JS loads
  force: false, // force fallback in supporting browsers
});

controller.supported; // native corner-shape?
controller.active; // fallback engine running?
controller.refresh(); // rescan + recompute
controller.destroy(); // tear down
```

--------------------------------

### Register hyperellipse in Svelte

Source: https://hyperellipse.vercel.app

Initialize the polyfill in a Svelte component using onMount.

```javascript
<!-- +layout.svelte -->
<script>
  import { onMount } from "svelte";
  import { registerHyperellipse } from "hyperellipse";

  onMount(() => {
    registerHyperellipse();
  });
</script>
```

--------------------------------

### Register hyperellipse in Vanilla JS

Source: https://hyperellipse.vercel.app

Initialize the polyfill in a standard TypeScript or JavaScript entry file.

```typescript
// main.ts
import { registerHyperellipse } from "hyperellipse";

registerHyperellipse();
```

--------------------------------

### Register hyperellipse in React

Source: https://hyperellipse.vercel.app

Initialize the polyfill in a React application using useEffect.

```javascript
'use client';
    
import { useEffect } from "react";
import { registerHyperellipse } from "hyperellipse";

export default function App() {
  useEffect(() => {
    registerHyperellipse();
  }, []);

  return <main>...</main>;
}
```

--------------------------------

### Register hyperellipse in Vue

Source: https://hyperellipse.vercel.app

Initialize the polyfill in a Vue component using onMounted.

```javascript
<!-- App.vue -->
<script setup>
import { onMounted } from "vue";
import { registerHyperellipse } from "hyperellipse";

onMounted(() => {
  registerHyperellipse();
});
</script>
```

--------------------------------

### Controller Methods

Source: https://hyperellipse.vercel.app

Methods available on the controller to manage the state and lifecycle of the polyfill engine.

```APIDOC
## refresh()

### Description
Rescan stylesheets and recompute every tracked element. Use this for imperative updates when styles change outside of standard CSS triggers.

## destroy()

### Description
Stop the fallback engine and remove all applied inline styles from the DOM.
```

--------------------------------

### registerHyperellipse()

Source: https://hyperellipse.vercel.app

Initializes the hyperellipse polyfill. This function is idempotent and SSR-safe, returning a controller instance to manage the polyfill behavior.

```APIDOC
## registerHyperellipse(options)

### Description
Initializes the hyperellipse polyfill. Repeated calls return the same controller instance.

### Parameters
- **options** (object) - Optional
  - **selector** (string) - Extra selectors for cross-origin sheets.
  - **pendingRadiusScale** (number) - Radius scale applied after JS loads.
  - **force** (boolean) - Force fallback in supporting browsers.

### Returns
- **controller** (object) - An instance with the following properties and methods:
  - **supported** (boolean) - Indicates if native corner-shape is supported.
  - **active** (boolean) - Indicates if the fallback engine is running.
  - **refresh()** (function) - Rescans and recomputes shapes.
  - **destroy()** (function) - Tears down the polyfill instance.
```

--------------------------------

### Controller Properties

Source: https://hyperellipse.vercel.app

Read-only properties to check the current status of the polyfill.

```APIDOC
## supported

### Description
Boolean indicating whether the browser supports native corner-shape.

## active

### Description
Boolean indicating whether the JS fallback engine is currently running.
```

--------------------------------

### Apply corner shape in CSS

Source: https://hyperellipse.vercel.app

Define the corner shape and border radius using CSS custom properties.

```css
.card {
  --corner-shape: squircle;
  border-radius: 60px;
}
```

--------------------------------

### Apply corner-shape via CSS

Source: https://hyperellipse.vercel.app

Use CSS variables to define the corner shape and scale for an element.

```css
.button {
  --corner-shape: squircle;
  border-radius: calc(45px * var(--corner-scale, 1));
}
```

--------------------------------

### Animation with Shadow

Source: https://hyperellipse.vercel.app

Animates size while maintaining a squircle box-shadow.

```css
@keyframes stretch {
  0%,
  100% {
    width: 5.5rem;
    height: 3.25rem;
  }
  33% {
    width: 3.5rem;
    height: 5rem;
  }
  66% {
    width: 5rem;
    height: 3.5rem;
  }
}

.block {
  --corner-shape: squircle;
  border-radius: 28px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.25);
  animation: stretch 3s ease-in-out infinite;
}
```

--------------------------------

### Animation with Outline

Source: https://hyperellipse.vercel.app

Animates size while maintaining a squircle outline.

```css
@keyframes breathe {
  0%,
  100% {
    width: 3.25rem;
    height: 3.25rem;
  }
  50% {
    width: 5.5rem;
    height: 5.5rem;
  }
}

.block {
  --corner-shape: squircle;
  border-radius: 28px;
  outline: 2px solid rgb(0 0 0 / 0.25);
  outline-offset: 5px;
  animation: breathe 2.4s ease-in-out infinite;
}
```

--------------------------------

### Define corner-shape values

Source: https://hyperellipse.vercel.app

Supported shorthand grammar for the --corner-shape property, accepting one to four values.

```css
--corner-shape: squircle;
--corner-shape: superellipse(4);
--corner-shape: squircle bevel scoop notch;

/* keywords: round, squircle, square, bevel, scoop, notch, superellipse(K) */
```

--------------------------------

### SSR fallback configuration

Source: https://hyperellipse.vercel.app

Add a CSS fallback for browsers that do not support the corner-shape property.

```css
@supports not (corner-shape: squircle) {
  :root {
    --corner-scale: 0.6;
  }
}

/* or @import "hyperellipse/css"; */
```

--------------------------------

### Apply Corner Shape with Box Shadow

Source: https://hyperellipse.vercel.app

Combines a squircle shape with a box shadow.

```css
.block {
  --corner-shape: squircle;
  border-radius: 28px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.25);
}
```

--------------------------------

### Apply Corner Shape with Outline

Source: https://hyperellipse.vercel.app

Combines a squircle shape with an outline and offset.

```css
.block {
  --corner-shape: squircle;
  border-radius: 28px;
  outline: 2px solid rgb(0 0 0 / 0.25);
  outline-offset: 5px;
}
```

--------------------------------

### Apply Corner Shape with Border

Source: https://hyperellipse.vercel.app

Combines a squircle shape with a solid border.

```css
.block {
  --corner-shape: squircle;
  border-radius: 28px;
  border: 2px solid rgb(0 0 0 / 0.2);
}
```

--------------------------------

### Basic Squircle Styling

Source: https://hyperellipse.vercel.app

Applies a squircle shape to a block element with a linear gradient background.

```css
  --corner-shape: squircle;
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    rgb(0 0 0 / 0.15),
    rgb(0 0 0 / 0.05)
  );
}
```

--------------------------------

### Animation with Border

Source: https://hyperellipse.vercel.app

Animates size while maintaining a squircle border.

```css
@keyframes breathe {
  0%,
  100% {
    width: 3.25rem;
    height: 3.25rem;
  }
  50% {
    width: 5.5rem;
    height: 5.5rem;
  }
}

.block {
  --corner-shape: squircle;
  border-radius: 28px;
  border: 2px solid rgb(0 0 0 / 0.2);
  animation: breathe 2.4s ease-in-out infinite;
}
```

--------------------------------

### Style elements with corner-shape

Source: https://hyperellipse.vercel.app

Apply the custom property to elements to enable the shape.

```css
.button {
  --corner-shape: squircle;
  border-radius: 45px;
}
```

--------------------------------

### Hover Effects with Outline

Source: https://hyperellipse.vercel.app

Adjusts outline width and offset on hover.

```css
.block {
  --corner-shape: squircle;
  border-radius: 28px;
  outline: 2px solid rgb(0 0 0 / 0.25);
  outline-offset: 4px;
}

.block:hover {
  outline-width: 4px;
  outline-offset: 6px;
}
```

--------------------------------

### Engine event log output

Source: https://hyperellipse.vercel.app/lab

Displays the sequence of intersection events and registration calls captured by the engine.

```text
[12:50:42 PM] intersect · block · in
[12:50:42 PM] intersect · block · in
[12:50:42 PM] intersect · block · in
[12:50:42 PM] intersect · block · in
[12:50:42 PM] intersect · block · in
[12:50:42 PM] intersect · block · out
[12:50:42 PM] intersect · block · out
[12:50:42 PM] intersect · block · out
[12:50:42 PM] intersect · block · out
[12:50:42 PM] intersect · block · out
[12:50:42 PM] intersect · block · out
[12:50:42 PM] intersect · block · out
[12:50:42 PM] intersect · block · in
[12:50:42 PM] intersect · #12 · out
[12:50:42 PM] intersect · #11 · out
[12:50:42 PM] intersect · #10 · out
[12:50:42 PM] intersect · #9 · out
[12:50:42 PM] intersect · #8 · out
[12:50:42 PM] intersect · #7 · out
[12:50:42 PM] intersect · #6 · out
[12:50:42 PM] intersect · #5 · out
[12:50:42 PM] intersect · #4 · out
[12:50:42 PM] intersect · #3 · in
[12:50:42 PM] intersect · #2 · in
[12:50:42 PM] intersect · #1 · in
[12:50:42 PM] intersect · block · in
[12:50:42 PM] intersect · block · in
[12:50:42 PM] registerHyperellipse({ force: true })
```

--------------------------------

### Pill Shape Squircle

Source: https://hyperellipse.vercel.app

Creates a pill-shaped squircle by setting border-radius to 50%.

```css
.block {
  --corner-shape: squircle;
  border-radius: 50%;
}
```

--------------------------------

### Hover Effects with Shadow

Source: https://hyperellipse.vercel.app

Increases box-shadow intensity on hover.

```css
.block {
  --corner-shape: squircle;
  border-radius: 28px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

.block:hover {
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.25);
}
```

--------------------------------

### Apply corner-shape via data attribute

Source: https://hyperellipse.vercel.app

Use the data-corner-shape attribute when CSS stylesheet modification is not possible.

```html
<div data-corner-shape="squircle" style="border-radius: 32px"></div>
```

--------------------------------

### Define Superellipse Corner Shape

Source: https://hyperellipse.vercel.app

Applies a superellipse corner shape with a specific curvature parameter.

```css
.block {
  --corner-shape: superellipse(4);
  border-radius: 28px;
}
```

--------------------------------

### Define Per-corner Mixed Shapes

Source: https://hyperellipse.vercel.app

Applies different corner shapes to each corner of the element.

```css
.block {
  --corner-shape: squircle bevel scoop notch;
  border-radius: 28px;
}
```

--------------------------------

### Define Notch Corner Shape

Source: https://hyperellipse.vercel.app

Applies a notch corner shape to an element.

```css
.block {
  --corner-shape: notch;
  border-radius: 28px;
}
```

--------------------------------

### Hover Effects with Border

Source: https://hyperellipse.vercel.app

Updates border width on hover for squircle elements.

```css
.block {
  --corner-shape: squircle;
  border-radius: 28px;
  border: 2px solid rgb(0 0 0 / 0.2);
}

.block:hover {
  border-width: 4px;
}
```

--------------------------------

### Define Scoop Corner Shape

Source: https://hyperellipse.vercel.app

Applies a scoop corner shape to an element.

```css
.block {
  --corner-shape: scoop;
  border-radius: 28px;
}
```

--------------------------------

### Define Squircle Corner Shape

Source: https://hyperellipse.vercel.app

Applies a squircle corner shape to an element with a specified border radius.

```css
.block {
  --corner-shape: squircle;
  border-radius: 28px;
}
```
Tokens:
Raw