Skip to content

New238 animated icons, 75 free. See the icons ›

Nexus UI

Skein, a Next.js template

observability landing page

A dark and light landing page for a tool that stitches logs, metrics and traces into one live thread: a canvas hero where a bundle of fibres twists into a single thread and reacts to the pointer, an Ask box that types out a question and answers it with evidence, a pinned Trace, Ask and Watch story with a morphing dot glyph, a trace waterfall, a service marquee and a pointer-reactive closing band.

  • SaaS
  • Advanced
  • 1 page
  • 11 sections
Skein home page
Open it live

Inside the page

Screens from the live template. The first one is open to everyone; Pro unlocks the other 3.

What's in it

Sections, top to bottom

  1. 1Nav with Product and Resources Menus and Theme Toggle
  2. 2Canvas Thread Hero
  3. 3Customer Logo Strip
  4. 4Ask Box with Typed Questions
  5. 5Pinned Trace, Ask and Watch Story
  6. 6Integrations Marquee
  7. 7Customer Stories with Trace Waterfall
  8. 8Stats Band
  9. 9FAQ Accordion
  10. 10Closing Band with Line Burst
  11. 11Footer with Email Form

Built in

  • Light and dark themes with a view-transition toggle that remembers the choice
  • Canvas hero: a bundle of fibres twists into one thread, bends away from the pointer, and a press sends a coloured pulse down it
  • Ask box that cycles through four scripted questions on its own, then lets visitors type their own and get a sample answer with evidence
  • Pinned scroll story where a dot glyph morphs from Trace to Ask to Watch as you scroll
  • Trace waterfall chart and a customer carousel with direction-aware transitions
  • Vertical marquee of connected services with brand marks that pauses on hover
  • Closing band whose lines bend around the pointer and shift colour near it
  • Pure 2D canvas, no WebGL and no extra packages; scenes pause off screen and in background tabs
  • No remote images, no web fonts to load and no audio; reduced-motion settings respected
  • Fully responsive from 320px with no horizontal scroll

Run it on your machine

  1. Get the code

    Get Pro or lifetime access, then download the source zip from this page.

  2. Install

    In the project folder:

    $ npm install

  3. Start it

    Then open localhost:3000.

    $ npm run dev

More templates

See all templates

Make Skein yours

Included in Pro, $49.99 a year, along with every other template. Swap in your words and colours and ship it.

Live preview