Field Notes components and templates
Explore 34 ThreeUI components, templates, backgrounds, and interactive effects tagged Field Notes, with previews and editable implementation source.
- Mara Voss
A complete field-recordist portfolio built as an editorial archive of vanishing sounds, with paper textures, specimen cards, listening records, field logs, an extruded WebGL hero wordmark and contact sheet that orbit under the pointer, and deliberately paced chapter transitions.
- Terrane
A cinematic field-geology expedition story that moves from a living desert survey into layered field notes, an interactive journal, a flight through fourteen rock exposures, an aerial lens study, expedition cards, methodology, traveller accounts, questions, and a dusk landscape.
- ASCII Field — Vortex
Rings of type stacked into a receding funnel instead of one flat plane, each ring riding up past the next as the pointer moves, with a near/far light ramp shading the depth and motes drifting in the gaps between layers.
- ASCII Field — Tide
The stack laid flat as open water: twenty bands of type bent along a sine and spread from a horizon to the foreground, each one running a beat behind the one in front so the swell travels out of the frame.
- ASCII Field — Ridge
The stack read as a range: seven ridged silhouettes with type packed under each crest and thinning into the shadow below, separated so the front range travels ten times as far as the back under an ember dusk.
- ASCII Field — Canopy
The stack grown into a tree, where one layer is one branch: every limb is a strip of type pivoting on its own foot, carrying a depth drawn at generation time, so the crown opens into a volume in a green-black wood.
- Shader Buttons — Star Portal
Two drifting Canvas 2D star fields with an authored holographic pill button.
- Shader Buttons — Ignition
A raw-WebGL ambient field with a tactile ignition control.
- Shader Buttons — Induction
A kinetic ambient field paired with a raw-WebGL induction button.
- Shader Buttons — Plasma
A deep-blue laboratory field with a luminous plasma control.
- Shader Buttons — Tactile
A fluid ambient background with a tactile raw-WebGL button.
- Shader Buttons — Thinking
A luminous Canvas 2D trace orbiting a softly raised blue button.
- Shader Buttons — Raking Light Pill
A pill-shaped shader button with raking GLSL light bands, sparse motes, a soft edge, and hover intensification.
- Shader Buttons — Liquid Glass
Refractive glass capsule with flowing color, light response, and a tactile press state.
- Shader Buttons — Intelligence Glow
Iridescent intelligence glow with a listening state and animated voice bars.
- Shader Buttons — Holographic Foil
Three.js foil material that tilts with the pointer and changes on click.
- Shader Buttons — Particle Swarm
A Three.js particle swarm gathers around an interactive button and resolves on click.
- Shader Buttons — Voice Orb
Reactive Three.js orb and a press-and-hold voice control.
- Shader Buttons — Water Ripple
WebGL2 water simulation that ripples under pointer movement and presses.
- Shader Buttons — Dithered Hold
Pixelated shader fill that advances while the button is held.
- Shader Buttons — Lava Lamp
Warm liquid blobs shift under hover and heat up on click.
- Shader Buttons — Brushed Gold
Three.js brushed gold material with responsive light and a press state.
- Shader Buttons — Ink in Water
WebGL2 fluid ink swirls inside a glass capsule as the pointer stirs it.
- Shader Buttons — Glassy Split
A lilac glass split button with a working creation menu.
- Shader Buttons — Generate Site
A violet enamel button with a star field and animated generation state.
- Shader Buttons — Chrome Upload
A polished chrome upload button with shader driven metal reflections.
- Shader Buttons — Book a Demo
A dark control with a moving lime dot matrix arrow.
- Shader Buttons — Iridescent Glass
A frosted download button with iridescent shader color and glass lettering.
- Shader Buttons — Create & Get Started
A paired ceramic and violet primary action study.
- Shader Buttons — Soft Surface
A softly extruded service button with a recessed arrow control.
- Shader Buttons — Balloon
An inflated fabric button with a responsive Three.js cloth surface.
- Shader Buttons — Light Switch
A molded day and night rocker switch with spring motion.
- Shader Buttons — Start Growing
A forest glass capsule with optical filaments and a spring switch.
- Shader Buttons — Car Controls
Sculpted automotive keycaps with functional airflow and heat states.