Frontend Mono Design System

Animation-first packages for expressive web experiences.

This site showcases reusable packages you can consume across apps in this monorepo.

Total packages

26

Focused on

Motion + Interaction

Install command

npm i <package-name>

Featured packages

High-visibility effects that are great entry points for integration.

@frontend_mono/cards-parallax

Layered perspective cards that react to cursor and scroll depth.

import cardsParallax from '@frontend_mono/cards-parallax'View package

@frontend_mono/water-ripple

Fluid ripple simulation for cinematic hero backgrounds and sections.

import waterRipple from '@frontend_mono/water-ripple'View package

@frontend_mono/smooth-scroll

Drop-in smooth scrolling behavior already used in this app shell.

import smoothScroll from '@frontend_mono/smooth-scroll'View package

@frontend_mono/ripple

Creates a simulated watery effect as a backdrop

import ripple from '@frontend_mono/ripple'View package

@frontend_mono/ripple-shader

React Three Fiber port of the Ripple-Shader effect with configurable assets.

import rippleShader from '@frontend_mono/ripple-shader'View package

All available packages

Grouped by category to help you discover the right primitive quickly.

layout

@frontend_mono/awwwards-contact

npm i @frontend_mono/awwwards-contact

Example + usage
layout

@frontend_mono/awwwards-description

npm i @frontend_mono/awwwards-description

Example + usage
layout

@frontend_mono/awwwards-header

npm i @frontend_mono/awwwards-header

Example + usage
layout

@frontend_mono/awwwards-landing

npm i @frontend_mono/awwwards-landing

Example + usage
interaction

@frontend_mono/awwwards-magnetic

npm i @frontend_mono/awwwards-magnetic

Example + usage
utility

@frontend_mono/awwwards-preloader

npm i @frontend_mono/awwwards-preloader

Example + usage
layout

@frontend_mono/awwwards-projects

npm i @frontend_mono/awwwards-projects

Example + usage
interaction

@frontend_mono/awwwards-rounded-button

npm i @frontend_mono/awwwards-rounded-button

Example + usage
utility

@frontend_mono/awwwards-sliding-images

npm i @frontend_mono/awwwards-sliding-images

Example + usage
scroll

@frontend_mono/cards-parallax

npm i @frontend_mono/cards-parallax

Example + usage
distortion

@frontend_mono/image-slide-project-gallery

npm i @frontend_mono/image-slide-project-gallery

Example + usage
scroll

@frontend_mono/liquid-distortion

npm i @frontend_mono/liquid-distortion

Example + usage
distortion

@frontend_mono/mouse-distort

npm i @frontend_mono/mouse-distort

Example + usage
scroll

@frontend_mono/mouse-scale-image-gallary

npm i @frontend_mono/mouse-scale-image-gallary

Example + usage
distortion

@frontend_mono/ripple-shader

npm i @frontend_mono/ripple-shader

Example + usage
utility

@frontend_mono/sliding-stairs-menu

npm i @frontend_mono/sliding-stairs-menu

Example + usage
scroll

@frontend_mono/smooth-scroll

npm i @frontend_mono/smooth-scroll

Example + usage
scroll

@frontend_mono/svg-bezier-curve

npm i @frontend_mono/svg-bezier-curve

Example + usage
scroll

@frontend_mono/three-d-perspective-text

npm i @frontend_mono/three-d-perspective-text

Example + usage
scroll

@frontend_mono/three-d-wave-scroll

npm i @frontend_mono/three-d-wave-scroll

Example + usage
distortion

@frontend_mono/water-ripple

npm i @frontend_mono/water-ripple

Example + usage
scroll

@frontend_mono/zoom-effect-scroll

npm i @frontend_mono/zoom-effect-scroll

Example + usage
scroll

@frontend_mono/zoom-parallax

npm i @frontend_mono/zoom-parallax

Example + usage