Which framework does this target?

The supplied component uses React hooks and imports Three.js. It needs a browser WebGL context; it is not the library-free backdrop suggested by the older summary. Other frameworks require integration work.

Does it call any external service?

The inspected effect generates geometry and shader output locally and contains no explicit service or texture request. Fonts are not bundled; provide local files and verify the host page’s actual network behavior.

Can I turn the motion off?

speed 0 prevents terrain-time progression, but rendering still loops. A proper static/pause mode needs source changes and lifecycle testing rather than merely setting an animation duration to zero.

Can I change the landscape and palette?

Use the exposed size, camera, plane and speed props first. Ridge shape and grayscale shading also live in shader code, independently of page theme tokens; review the result after modifying them.

Is it ready for a small embedded panel?

The wrapper accepts dimensions, but the renderer uses window dimensions on resize. Adapt and test the sizing logic for a panel rather than assuming viewport code follows any container automatically.

Ink Ridge Hero

Previews from the publisher

Put a short message over a continuously evolving, noise-shaped ridge landscape. The supplied React backdrop uses a Three.js WebGL canvas and custom GLSL shaders to form the terrain, with width, height, camera distance, plane size and speed exposed as props. It is a procedural visual treatment, not a terrain-data viewer, and it requires WebGL despite the old description’s library-free claim.

What you get

A GLSLHills React component, full shader source and usage example with headline/supporting copy. The code is copied into your application to edit and maintain; this is not a versioned npm block or a standalone completed site.
Procedural ridge geometry and translucent grayscale shading rendered on a continuous animation loop. Props default to 100vw/100vh, cameraZ 125, planeSize 256 and speed 0.5. The example draws the backdrop rather than loading a landscape photograph.
Written references define warm paper/teal light tokens, dark roles, Outfit body type, Sora headings and a 0.875rem base radius. The icon contract uses inline SVG with 1.5 px square-cap strokes and labeled monochrome marks for real vendors. Apply these during integration: the example’s fixed styles and effect parameters are not all controlled by one theme token.
Imagery/icon guidance, third-party notes and a source-check script. This archive contains no image or WOFF 2 font binaries and no application runtime. React, Three.js, browser WebGL support and the host page’s styling are actual requirements.

Before you choose

Choose this effect for its procedural atmosphere, then verify it earns its rendering cost. Keep the message understandable with a static fallback and test sizing/lifecycle on the actual page before treating the backdrop as production-ready.

Good fit

A creative or technical landing page where an abstract landscape can support a concise central message.
A project seeking an editable procedural backdrop instead of a pre-rendered image or video asset.
A team willing to integrate and maintain graphics code, review device performance and align it with its visual system.

Not for

A library-free 2D canvas effect, real geographic terrain, a scientific landscape simulation or visitor-controlled terrain editing.
A dependency-free/versioned block or automatic visual compatibility with a mature design system.
A complete hero with buttons, navigation, forms, authentication or checkout, or guaranteed behavior on browsers/devices without suitable WebGL support.

How to use

You say

/hero-ink-ridge Add the Ink Ridge Hero section to the top of the landing page for [product name]. Use my supplied copy and assets, and follow the existing page framework and styling.

Read the target project’s framework, client boundaries and styling before copying the backdrop and demo. Resolve React and three, then adapt TypeScript and import conventions as needed. Other frameworks require a real port; a standalone HTML deliverable is an optional explicit adaptation.
Replace the sample heading and support text with a concise message. The overlay uses fixed large type and pointer-events-none; there is no CTA or editable visitor state in the demo. Review heading wrapping and foreground contrast rather than assuming the canvas supplies a finished conversion flow.
Tune width, height, cameraZ, planeSize and speed through props before changing the shader. Color and ridge shaping also include shader values, so an accent-token change alone does not retheme the terrain. The drawing buffer resizes to window dimensions, not the declared component dimensions; inspect embedded/container use deliberately.
For a still or reduced-motion treatment, speed 0 stops terrain time progression but the requestAnimationFrame loop continues. Add a deliberate pause/static fallback if needed. Before production integration, review teardown: the current cleanup removes the resize listener but does not cancel the frame loop or dispose GPU resources. Do not assume repeated mounting is already handled.
Apply the written contract and supply local fonts. If adding images, follow portrait/abstract/photo slot rules and keep assets local. Run node scripts/check-blocks.mjs TARGET, build the host app and test narrow viewports, WebGL failure/fallback, repeated mounts and actual frame performance. Source checks alone cannot establish those outcomes.

Requirements and costs

You bring: Not collected yet
Dependencies: Not collected yet
Outside costs: Not collected yet
Publisher testing: v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT