Does Alfuix need JavaScript?

No. Alfuix is pure CSS and SCSS with no dependencies, so it works in plain HTML, React, Angular, Vue or Next.js.

How do Alfuix shapes work?

Every Alfuix shape is the same 24-point clip-path polygon. Utility classes only set CSS variables (--al-ts, --al-t, --al-extend-t, --al-center-t and so on) that move its corner and notch points, so the shape scales with its element.

Can a clipped Alfuix element have a border?

Yes. al-clip-border and al-clip-both redraw a border (and al-clip-inlay and al-clip-both an inner plate) on the same polygon, so the outline follows every cut.

Does Alfuix work with Bootstrap or Tailwind?

Yes. Alfuix extends Bootstrap and Tailwind: you keep their grid, spacing and colours, and Alfuix adds shapes, patterns, filters and motion on top.

Does Alfuix support right-to-left layouts?

Yes. Corner and side utilities flip with dir="rtl", so a top-start cut stays at the start of the line.

How do I install Alfuix?

Run npm install alfuix (or yarn add alfuix), or link the compiled stylesheet from jsDelivr: https://cdn.jsdelivr.net/npm/alfuix/dist/css/alfuix.min.css. Alfuix is MIT-licensed.

Mohammad Azad, a Senior UI/UX Designer, Product Designer, UI Developer and UI Engineer with 13+ years of experience, designed and built Alfuix as its sole designer and front-end architect.

Alfuix Open-source CSS UI toolkit · v1.0.14 · MIT

Futuristic CSS UI toolkit

Cut corners. Notch edges. On purpose.

Alfuix is an open-source CSS and SCSS toolkit for futuristic, sci-fi interfaces. Corner cuts, notches, hexagons, borders that follow every cut, patterns and motion, all from classes driven by CSS variables. It sits on top of Bootstrap or Tailwind and needs no JavaScript.

Explore alfuix.com

Open the playground

Shape 01 / 06

Corner cut

clip-path · polygon · 24 pts --al-* → @property

class al-clip al-corner-all-28

3,600+

Utility classes

Points per shape

Background patterns

Lines of JS needed

Cut with a class

Clip-path shapes Corner cuts Notches Hexagons Triangles & trapezoids Borders that follow the cut Inlays 49 patterns Hover & motion RTL-aware Bootstrap & Tailwind MIT licensed

01 — The toolkit

Most design systems are built for rounded, minimalist SaaS. Alfuix breaks the mold: every edge can be cut, notched or angled with a class, not a hand-drawn SVG frame.

Shapes from classes One polygon, moved by CSS variables.

Borders follow the cut Outlines and plates on the same points.

Zero JavaScript Pure CSS and SCSS, no dependencies.

What it is

An open-source CSS UI toolkit with advanced clipping and modern utilities, designed for building futuristic, high-density and tactical user interfaces.

Why I built it

Most modern design systems are built for standard, minimalist SaaS and dashboards. I wanted to break the mold with a high-performance FUI system optimised for advanced CSS clipping, cyber-security dashboards and sci-fi data tracking.

How I did it

As the sole designer and front-end architect, I built a cohesive ecosystem that matches advanced Figma components 1:1 with lightweight, utility-first SCSS and CSS3, for a seamless developer handoff.

Common headaches, cut out

Hover a card to see where its border goes, then click it to flip between plain clip-path and Alfuix and compare the corners.

Watch the corners

Hover a card. On a headache the outline is an ordinary border under a plain clip-path, so each ringed corner has a gap. On a fix, al-clip-both redraws the border on the same polygon, so it runs straight through every ring.

The slice itself: two copies of the headache, each clipped to one side of a diagonal, slide apart.

02 — Anatomy of a cut

One polygon. Twenty-four points.

Every Alfuix shape is the same clip-path polygon. Classes only move its points. Scroll to watch one box become a sci-fi panel.

01 / 06
The box

Every shape starts as one polygon with 24 points, all resting on the edges of the box. Nothing is cut yet, so it looks like a plain rectangle.
class="al-clip"
02 / 06
Corners

--al-ts, --al-te, --al-be and --al-bs slide the two points at each corner inward, for a 45° cut. Start and end mean they mirror in right-to-left pages.
al-ts-32 al-be-32 al-te-12 al-bs-12
03 / 06
Notches

Four points on every edge make a notch. --al-t sets how deep it bites into the top; --al-extend-t sets half its width.
al-t-24 al-extend-t-64
04 / 06
Centre

Notches sit in the middle of their edge. --al-center-t slides one along it, from 0% to 100%, to line it up with a tab or a title.
al-center-t-75
05 / 06
Every edge

The bottom and both sides have their own notch. al-x-* cuts the start and end edges at once, al-y-* the top and bottom.
al-x-14 al-extend-x-60 al-b-16 al-extend-b-64
06 / 06
Border & inlay

Swap al-clip for al-clip-both. Its ::after draws a border and its ::before an inner plate, both on the same 24 points, so the outline follows every cut.
al-clip-both al-border-2 al-inlay-8

The box clip-path: polygon( 24 points )

03 — Shape library

A class for every cut.

Every tile below is the real class string, rendered live. Copy one and paste it onto any element.

Cut corners

al-corner al-corner-all-16

Diagonal pair

al-corner al-ts-32 al-be-32

One corner

al-corner al-te-48

Top notch

al-clip al-corner-all-8 al-t-clip-x

Button tab

al-clip al-b-clip-x al-extend-b-35 al-b-6

Side ports

al-clip al-x-12 al-extend-x-25

Off-centre notch

al-clip al-t-16 al-extend-t-24 al-center-t-25

Every edge

al-clip al-all-clip al-corner-all-12

Hexagon

al-hexa al-w-110

Pointy hexagon

al-hexa-alt al-w-85

Triangle

al-triangle-up

Trapezoid

al-trapezoid-t-48 al-trapezoid-w-64px

Border that follows

al-clip-border al-corner-all-16 al-t-clip-x al-border-2 al-border-primary-75

Inlay plate

al-clip-inlay al-ts-24 al-be-24 al-inlay-6 al-inlay-bg-primary-50

Border + inlay

al-clip-both al-corner-all-12 al-b-clip-x al-border-2 al-inlay-6 al-border-warning-75 al-inlay-bg-warning-10

Hex badge

al-hexa al-hexa-inlay al-inlay-5 al-inlay-bg-primary-25 al-hexa-border al-border-2 al-border-primary-75

Surfaces: 49 patterns

Twelve patterns in four sizes (sm, md, lg, xl), plus a double grid. Any theme colour, at any strength.

al-pattern-zigzag-md al-pattern-info-25

checks
cross-dots
diagonal-lines
diagonal-stripes
dots
grid
horizontal-lines
horizontal-stripes
triangles
vertical-lines
vertical-stripes
zigzag

04 — Playground

Forge your own shape.

Every slider steps through the values Alfuix ships, so the code underneath is always real classes. Paste it into any Bootstrap or Tailwind page.

Corners

Top start0

Top end0

Bottom end0

Bottom start0

Top notch

Depth0

Half width0

Centre50%

Bottom notch

Depth0

Half width0

Side notches

Depth0

Half height0

Frame

Border0

Inlay0

Colour

Your shape 0 × 0

24 points · 0 lines of JS

Show the 24 points

0 classes

index.html

<div class="al-clip-both"></div>

05 — Motion & states

Shapes that move.

Hover, focus and loop effects that ship with the toolkit. Hover or tap each specimen; the class underneath is all it takes.

Hover me

Glass shineal-hover-glass-shine

Hover me

Glowal-hover-glow

Trace the edge

Tracing borderal-hover-fancy-border

Bracket me

Bracketsal-fancy-border

Orbiting light

Border gradiental-animate-border-gradient

Rotate on hoveral-hover-rotate-90

Sound waveal-animate-sound-wave

Water waveal-animate-water-wave

Rippleal-animate-ripple-circle

Grid loaderal-animate-preloader-grid

Pattern textal-text-pattern

Your own keyframes@keyframes → --al-*

Animate the cut, not the path.

Because Alfuix shapes are driven by variables, you can animate them. Register a variable with @property and the browser tweens it like any length, and the polygon follows: no JavaScript, no path morphing.

Every moving shape on this page (the hero panel, the anatomy box, the playground and the specimen beside this text) is an Alfuix class with registered --al-* variables.

morph.css

/* let the browser interpolate the cut */
@property --al-ts { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }
@property --al-t  { syntax: "<length-percentage>"; inherits: true; initial-value: 0px; }

/* on an element with class="al-clip-both" */
.panel { animation: cut 4s ease-in-out infinite alternate; }

@keyframes cut {
  from { --al-ts: 0px;  --al-t: 0px; }
  to   { --al-ts: 32px; --al-t: 18px; }
}

Install

06 — Get Alfuix

One stylesheet. No build step needed.

Install it from npm, or link the compiled CSS from a CDN. Package installs include only the CSS and SCSS, with no documentation or build tools.

# the toolkit (add Bootstrap or Tailwind as your base)
npm install alfuix
npm install bootstrap

yarn add alfuix

<!-- jsDelivr (or unpkg.com/alfuix/dist/css/alfuix.min.css) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alfuix/dist/css/alfuix.min.css">

// the whole toolkit, or just one module
@import "alfuix/scss/alfuix";
@import "alfuix/scss/alfuix-clip";

Read the docs

Source on GitHub

Four builds · dist/css

alfuix.cssEverything: shapes, utilities, patterns and motion
alfuix-clip.cssJust the clipping shapes
alfuix-animation.cssHover effects and motion
alfuix-utilities.cssSpacing, sizing, filters and other utilities

Every build also as .min.css
SCSS variables, mixins & tokens
Works with Bootstrap or Tailwind
React, Angular, Vue & Next.js
RTL-aware corner utilities
MIT licensed · v1.0.14

npm jsDelivr Examples Shapes docs

07 — The maker

One designer. Four corners.

I designed and built Alfuix on my own, from the shapes in Figma to the npm releases. Each corner of this card is one of the four hats I wore: pick a corner and it cuts itself open.

Mohammad Azad Senior UI/UX Designer

Years: 13+
Roles: 4
Classes: 3,600+
Releases: 14

Corner 01 / 04 · top start

UI/UX Designer

I drew the shape language in Figma first: corner cuts, notched panels, hexagon badges and frames that keep their outline. Each one became a class, matched 1:1.

Figma componentsal-hexaal-clip-both

Pick a corner (or use the arrow keys). The cut is just --al-ts and its siblings, eased by the browser.

Why I built Alfuix

Four chapters, four blades. Open one, or let them play.

Chapter 01 / 04

Every system looked the same

Most design systems are built for standard, minimalist SaaS and dashboards: rounded corners, soft shadows and the same card everywhere.

Chapter 02 / 04

Sci-fi UI had no toolkit

I wanted interfaces for cyber-security dashboards and sci-fi data tracking, with cut corners and notched panels. In plain CSS that meant writing a new clip-path polygon for every component.

.card-a { clip-path: polygon(0 14px, 14px 0, calc(100% - 52px) 0, …); }
.card-b { clip-path: polygon(0 20px, 20px 0, 62% 0, 66% 9px, …); }
.card-c { clip-path: polygon(0 0, calc(100% - 18px) 0, …); }

× every component

Chapter 03 / 04

Figma and SCSS, 1:1

As the sole designer and front-end architect, I matched advanced Figma components 1:1 with lightweight, utility-first SCSS and CSS3, so developers get exactly the shapes the designs use.

Chapter 04 / 04

Free for everyone

Alfuix is MIT-licensed on npm, jsDelivr and GitHub, and it runs this whole site: the Vault Zero, Mizan and Alif pages are cut with the same classes.

$ npm install alfuix

MIT npm CDN

Cut corners. Notch edges. On purpose.

What it is

Why I built it

How I did it

Common headaches, cut out

One polygon. Twenty-four points.

The box

Corners

Notches

Centre

Every edge

Border & inlay

A class for every cut.

Cut corners

Diagonal pair

One corner

Top notch

Button tab

Side ports

Off-centre notch

Every edge

Hexagon

Pointy hexagon

Triangle

Trapezoid

Border that follows

Inlay plate

Border + inlay

Hex badge

Surfaces: 49 patterns

Forge your own shape.

Shapes that move.

Animate the cut, not the path.

Install

One stylesheet. No build step needed.

Four builds · dist/css

One designer. Four corners.

UI/UX Designer

Why I built Alfuix

Every system looked the same

Sci-fi UI had no toolkit

Figma and SCSS, 1:1

Free for everyone