← Library

8 pieces

Effects

Tickers, typewriters, neon, 3D on scroll, particles, confetti.

Ticker

bold

31 lines

See the code
    site "Ticker"
  colors ink #111111, acid #D7FF3A, paper #F2F0E9
  fonts "Satoshi", "Anton"
  style background paper, color ink

let words = ["Design", "Code", "Motion", "3D", "Brand", "Launch"]

animation slide, 18s, loop, linear
  from move 0 0
  to move -50% 0

animation slide-back, 22s, loop, linear
  from move -50% 0
  to move 0 0

style band
  padding 18 0, clip, full-width

style word
  font "titles", size 72, uppercase, padding 0 28, line-height 1

page "/"
  section fullscreen, center, padding 0
    section one, band, background acid, tilt -3
      row no-wrap, slide, gap 0
        for w in words + words
          text "{w} ✳", word
    section two, band, background ink, color acid, tilt 2
      row no-wrap, slide-back, gap 0
        for w in words + words
          text "{w} ●", word
    ```

Rotating words

playful

18 lines

See the code
    site "Rotating words"
  colors ink #1D1630, cream #FFF8F0, grape #6C3BFF, candy #FF4FA3
  fonts "Satoshi", "Cabinet Grotesk"
  style background cream, color ink

animation swap, 0.5s
  from move 0 40, opacity 0
  to move 0 0, opacity 1

let words = ["websites", "shops", "portfolios", "games", "apps"]
state shown = 0
every 1.6s, -> shown = (shown + 1) % length(words)

page "/"
  section fullscreen, center
    title "We build", size 88, center, tracking -3
    for w, i in words
      title w, size 88, center, tracking -3, text-gradient grape candy, swap, hidden (shown != i)
    ```

Neon sign

neon

18 lines

See the code
    site "Neon sign"
  colors wall #0A0810, pink #FF3D9A, cyan #3DF5FF
  fonts "Satoshi", "Monoton"
  style background wall, color white

animation buzz, 4s, loop
  from opacity 1
  6% opacity 0.3
  8% opacity 1
  60% opacity 1
  62% opacity 0.5
  64% opacity 1
  to opacity 1

page "/"
  section fullscreen, center
    title "Open", font "titles", size 140, color pink, text-glow pink 34, buzz, center
    text "late · every night", font "titles", size 28, color cyan, text-glow cyan 18, center
    ```

Outline to fill

brutalist

16 lines

See the code
    site "Outline"
  colors paper #F2F0E9, ink #111111, pink #FF4FA3
  fonts "Satoshi", "Anton"
  style background paper, color ink

let lines = ["Strategy", "Identity", "Websites", "Campaigns"]

style hollow
  font "titles", size 96, uppercase, line-height 1, stroke 2 ink, cursor pointer
  hover color pink, move 24 0

page "/"
  section fullscreen, padding 40 56
    text "Hover the words ↓", font "mono", size 13
    for l in lines
      title l, hollow
    ```

3D on scroll

immersive

19 lines

See the code
    site "3D on scroll"
  colors night #0B0A14, orange #FF6A2B, violet #7B5CFF, mint #4DDFA8
  fonts "Satoshi", "Clash Display"
  style background night, color white

page "/"
  scene shapes, fullscreen, center, particles dust
    light neon
    camera follows mouse
    object "torus", color violet, metal, size 0.9, position -2.4 0.6 0
      spin on scroll
      float
    object "gem", glass, color mint, size 0.7, position 2.3 0.9 -1
      spin 40/s
      float 0.6
    object "capsule", color orange, matte, size 0.6, position 1.6 -1.3 0
      spin slow
    title "Shapes, *free*.", size 92, center, tracking -3
    text "Sphere, cube, torus, knot, gem… no model to load.", color #FFFFFFAA, center
    ```

Snow night

immersive

10 lines

See the code
    site "Snow night"
  colors night #0D1424, frost #DCEBFF
  fonts "Satoshi", "Gambetta"
  style background night, color frost

page "/"
  scene snow, fullscreen, center, particles snow, gradient #0D1424 #23345A 180
    text "Zermatt · Dec 2026", uppercase, tracking 4, size 13, center
    title "First *snow*.", font "titles", weight 400, size 110, center
    button "Book the chalet", background frost, color night
    ```

Scroll reveal

minimal

15 lines

See the code
    site "Scroll reveal"
  colors ink #111111, paper #FFFFFF, blue #2B59FF
  fonts "Satoshi"
  style background paper, color ink

let steps = ["Brief", "Sketch", "Design", "Build", "Launch"]

page "/"
  section padding 48
    text "Scroll ↓", color blue, weight 600
    for s, i in steps
      row gap 24, border-top 1 #11111122, padding 28 0
        text "0{i + 1}", color blue, font "mono"
        title s, size 64, tracking -2
        enters from bottom
    ```

Live badges

colorful

26 lines

See the code
    site "Live badges"
  colors ink #151320, paper #FAF8F5, red #FF3B47, green #19C37D, amber #FFB020
  fonts "Satoshi"
  style background paper, color ink

style badge
  background white, radius 999, padding 10 18 10 14, gap 10, shadow soft, size 15, weight 600

style dot
  width 10, height 10, round

page "/"
  section fullscreen, center
    row gap 14, center
      row badge
        box dot, background red
          pulse
        text "Live now"
      row badge
        box dot, background green
          pulse
        text "All systems normal"
      row badge
        box dot, background amber
          pulse
        text "3 spots left"
    ```