Frontend & Design · By nirholas

Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film…

nirholas/three.ws

Turn a completed daily UI inspiration capture into exactly five original landing-page builds, one per separate Codex task, using Sites.

nirholas/three.ws

Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees…

nirholas/three.ws

Turn a reference video into a super detailed recreation or inspiration prompt.

nirholas/three.ws

Add a restrained particle atmosphere inside one section with configurable shapes, density, gravity, wind, sway, rotation, recycling or settling, pointer disturbance, visibility pausing, responsive…

nirholas/three.ws

Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes.

nirholas/three.ws

Build a cursor or touch particle interaction that emits by distance along the traveled segment into a recycled GPU point pool, with optional keyboard-triggered bursts.

nirholas/three.ws

Reveal Three.js geometry with an expanding world-space scan whose wire cage leads the solid surface, then burns away.

nirholas/three.ws

Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis.

nirholas/three.ws

Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds…

nirholas/three.ws

A skill your agent uses when adding a lightweight interactive globe with cobe (canvas setup, markers, interaction, performance, integration with React/Next.js).

nirholas/three.ws

Apply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image).

nirholas/three.ws

Create a recurring daily UI inspiration capture. An agent skill from nirholas/three.ws.

nirholas/three.ws

A skill your agent uses when you need design-first, spec-driven, skimmable prompts for UI generation.

nirholas/three.ws

Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering.

nirholas/three.ws

Build falling leaves that read as leaves, with each one tumbling on its own axis so it presents a face, thins to an edge, and opens out again, and with its sideways slip driven by that same tumble.

nirholas/three.ws

A skill your agent uses when you need to add or debug professional web animations with GSAP (timelines, ScrollTrigger, stagger, transforms) in HTML/CSS/JS/React.

nirholas/three.ws

Create masked staggered word reveals on scroll with GSAP ScrollTrigger.

nirholas/three.ws

A skill your agent uses when implementing 2D physics interactions with Matter.js, including Engine/World setup, Render/Runner configuration, adding bodies and constraints, and…

nirholas/three.ws

Build a cursor trail whose spacing stays constant at any hand speed, by emitting motes per unit of distance travelled rather than on a timer, so a flick draws the same continuous ribbon as a crawl…

nirholas/three.ws

Turn any ordered process into a data-driven vertical or horizontal scroll story with a base line, progress fill, active step states, responsive collapse, semantic fallback, and reduced-motion…

nirholas/three.ws

Build reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers.

nirholas/three.ws

Reveal marked-up text word by word as scroll progress advances, while preserving semantic inline links, emphasis, responsive line wrapping, and reduced-motion readability.

nirholas/three.ws

Turn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.js…

nirholas/three.ws

A skill your agent uses when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns).

nirholas/three.ws

Turn a visual or interaction technique you already built into a reusable web-design skill, by isolating the one mechanism that makes it work while reproducing its approved reference exactly around…

nirholas/three.ws

A skill your agent uses when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel.

nirholas/three.ws

Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one…

nirholas/three.ws

Convert a supplied HTML page or generated HTML reference into a screenshot-backed article containing multiple reusable interaction prompts.

nirholas/three.ws

A skill your agent uses when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion…

nirholas/three.ws