Houdini APIs

11 snippets

Explore Houdini APIs resources for the web — layouts, components, effects, and more. Pick a subsection below to continue.

html-css-houdini-api

Snippets(11)

Beveled Corner Glow Cards
A beveled corner glow cards built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Advanced
Browser support
Chrome 120+, Edge 120+, Firefox 120+, Safari 17+
Features
CSS Corner Shape, Houdini (@property), CSS Masks, Progressive Enhancement
Responsive
Yes
Cinematic Black Magic Volume Knob
A cinematic black magic volume knob built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, SCSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 118+, Edge 118+, Firefox 120+, Safari 17.4+ (Partial)
Features
CSS @property, SVG Filters, Particle System
Responsive
Yes
Glowing Dropdown
A glowing dropdown built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS Houdini, CSS Custom Properties
Difficulty
Advanced
Features
Neon Glow, Animated Gradients, Custom Select Menu
Glowing Tabs
A glowing tabs built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
CSS Houdini API, JavaScript, CSS :has()
Difficulty
intermediate
Features
Glowing background, Smooth transitions, Dynamic geometry calculation
Holographic 3D Interactive Card
A holographic 3d interactive card built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+3 more
Demo Code
Technologies
Pug, SCSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 85+, Edge 85+, Safari 16.4+, Firefox 128+
Features
3D Perspective, Pointer Tracking, Iridescent Gradients, Holographic Shimmer
Responsive
Yes
Invert Radius Shape with Cool Hover Effect
A invert radius shape with cool hover effect built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
CSS Houdini, CSS Variables
Difficulty
advanced
Features
Animated Mask, Interactive Shape, Cursor Tracking
Morphing Rounded Triangle Image Mask
A morphing rounded triangle image mask built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Web Components
Demo Code
Technologies
HTML, CSS
Difficulty
Advanced
Browser support
Chrome 111+, Edge 111+, Firefox 117+, Safari 16.4+
Features
Radius Animation, Math Functions, CSS Masking
Responsive
Yes
Pure CSS Synthwave 80s Animation
A pure css synthwave 80s animation built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
Pug, SCSS, JavaScript
Difficulty
Advanced
Browser support
Chrome 60+, Edge 79+, Firefox 55+, Safari 11+
Features
Infinite Grid, Mask Animations, Perspective 3D, Audio Integration
Responsive
Yes
Synchronized Pure CSS Skeleton Loader
A synchronized pure css skeleton loader built with modern frontend techniques for responsive and reusable UI.
Loading Animation Semantic Html Css Loader Html+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Advanced
Browser support
Chrome 111+, Edge 111+, Safari 16.4+, Firefox 128+
Features
Global Synchronization, Viewport-aware speed, No-JS Math, Light/Dark Mode
Responsive
Yes
Trigonometric 3D Orbit Gallery
A trigonometric 3d orbit gallery built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
Pug, SCSS
Difficulty
Advanced
Browser support
Chrome 111+, Edge 111+, Safari 16.4+, Firefox 113+
Features
CSS Trigonometry, Houdini API (@property), 3D Transforms, Parametric Animation
Responsive
Yes
Uninvert Kitty
A uninvert kitty built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS Houdini, CSS Variables, 3D Transforms
Difficulty
Advanced
Features
Cursor tracking, Spotlight reveal, 3D Tilt

Snippets(11)

related hubs