Everything a high-end fashion, jewellery or hospitality site needs to feel expensive: slow reveals, refined cursor, editorial hovers and a hero that breathes.
8 effects · use them together
Featured light A drop-in luxury hero: masked serif headline lines, a CSS-drawn glass flacon revealed by clip-path and floating on a 6s sine loop, a rotating textPath badge, a magnetic CTA, and swatches that re-tint the whole scene by tweening one CSS variable.
light A full-screen preloader counts 0→100 in a huge serif numeral while a hairline fills; the number and label slide out of their masks, two panels split open and the hero headline rises as its image settles from 1.15 to 1.
light An editorial block — kicker, headline, three paragraphs and a byline — where every line rises out of an overflow mask as its block scrolls into view (SplitText lines, yPercent 100 → 0, 1.1s power4.out, 0.07s stagger).
light An editorial index of six project rows; hovering a row unclips a floating image that follows the pointer with lag and tilts with its velocity, crossfades between rows, nudges the row text right and dims the others.
light Three pill buttons attract toward the pointer inside an invisible radius, their labels leading slightly for parallax, flood with colour from the entry point, and spring back with an elastic snap on leave.
light A three-page demo where every navigation runs one timeline: a surface panel and a lime panel wipe up from the bottom (0.8s power4.inOut, stagger 0.08), the page swaps beneath, then they exit upward as the new content rises in.
Featured WebGL A noise-displaced icosahedron rendered as fake glass: the headline and drifting colour blobs behind it are rendered to a texture and refracted through the blob with chromatic aberration, a lime Fresnel rim and a specular hit, while it follows the pointer.
Featured light A burger morphs into a cross while a full-screen curtain drops via clip-path; five giant serif links rise from masks with a stagger, a contact column fades in and a background index number follows the hovered link. Close simply reverses the timeline.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…