diff --git a/.gitignore b/.gitignore
index 599be4e..66022f2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,8 @@
 *.beam
 *.ez
 /build
+
+/demo/*/.lustre
+/demo/*/build
+
 erl_crash.dump
diff --git a/demo/tid/gleam.toml b/demo/tid/gleam.toml
new file mode 100644
index 0000000..d473894
--- /dev/null
+++ b/demo/tid/gleam.toml
@@ -0,0 +1,12 @@
+name = "tid"
+version = "1.0.0"
+target = "javascript"
+
+[dependencies]
+at = { path = "../../" }
+gleam_stdlib = ">= 1.0.0 and < 2.0.0"
+gleam_time = ">= 1.8.0 and < 2.0.0"
+lustre = ">= 5.7.1 and < 6.0.0"
+
+[dev_dependencies]
+lustre_dev_tools = ">= 2.3.6 and < 3.0.0"
diff --git a/demo/tid/manifest.toml b/demo/tid/manifest.toml
new file mode 100644
index 0000000..9b39818
--- /dev/null
+++ b/demo/tid/manifest.toml
@@ -0,0 +1,53 @@
+# Do not manually edit this file, it is managed by Gleam.
+#
+# This file locks the dependency versions used, to make your build
+# deterministic and to prevent unexpected versions from being included
+# in your application.
+#
+# You should check this file into your source control repository.
+
+packages = [
+  { name = "argv", version = "1.1.0", build_tools = ["gleam"], requirements = [], otp_app = "argv", source = "hex", outer_checksum = "3277D100448BDB4A29B6D58C0F36F631CBC349E8BDD09766C6309DF202831140" },
+  { name = "at", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_json", "gleam_stdlib", "gleam_time"], source = "local", path = "../.." },
+  { name = "booklet", version = "1.1.0", build_tools = ["gleam"], requirements = [], otp_app = "booklet", source = "hex", outer_checksum = "08E0FDB78DC4D8A5D3C80295B021505C7D2A2E7B6C6D5EAB7286C36F4A53C851" },
+  { name = "directories", version = "1.2.0", build_tools = ["gleam"], requirements = ["envoy", "gleam_stdlib", "platform", "simplifile"], otp_app = "directories", source = "hex", outer_checksum = "D13090CFCDF6759B87217E8DDD73A75903A700148A82C1D33799F333E249BF9E" },
+  { name = "envoy", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "envoy", source = "hex", outer_checksum = "9C6FBB6BFA02A52798BEEC5977A738CAD6E4A057F4B67FD0C8061AD2502C191A" },
+  { name = "exception", version = "2.1.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "exception", source = "hex", outer_checksum = "6BDEA95248093599391C3B5DF1835C5C6A86C353C2F99CE539B450E3432FE117" },
+  { name = "filepath", version = "1.1.2", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "filepath", source = "hex", outer_checksum = "B06A9AF0BF10E51401D64B98E4B627F1D2E48C154967DA7AF4D0914780A6D40A" },
+  { name = "gleam_community_ansi", version = "1.5.0", build_tools = ["gleam"], requirements = ["gleam_community_colour", "gleam_regexp", "gleam_stdlib"], otp_app = "gleam_community_ansi", source = "hex", outer_checksum = "B5AA433AF84313E23FDF90CCFF752B9380FE9FFCE02B2949D49B7AACCC77B16D" },
+  { name = "gleam_community_colour", version = "2.0.4", build_tools = ["gleam"], requirements = ["gleam_json", "gleam_stdlib"], otp_app = "gleam_community_colour", source = "hex", outer_checksum = "6DB4665555D7D2B27F0EA32EF47E8BEBC4303821765F9C73D483F38EE24894F0" },
+  { name = "gleam_crypto", version = "1.6.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_crypto", source = "hex", outer_checksum = "2DE9E4EF53CF6FEE049D4F765731F7178F7A11AEFAE00EEE63BF7536B354AD3F" },
+  { name = "gleam_erlang", version = "1.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "1124AD3AA21143E5AF0FC5CF3D9529F6DB8CA03E43A55711B60B6B7B3874375C" },
+  { name = "gleam_http", version = "4.3.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_http", source = "hex", outer_checksum = "82EA6A717C842456188C190AFB372665EA56CE13D8559BF3B1DD9E40F619EE0C" },
+  { name = "gleam_httpc", version = "5.0.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_http", "gleam_stdlib"], otp_app = "gleam_httpc", source = "hex", outer_checksum = "C545172618D07811494E97AAA4A0FB34DA6F6D0061FDC8041C2F8E3BE2B2E48F" },
+  { name = "gleam_json", version = "3.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_json", source = "hex", outer_checksum = "44FDAA8847BE8FC48CA7A1C089706BD54BADCC4C45B237A992EDDF9F2CDB2836" },
+  { name = "gleam_otp", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "BA6A294E295E428EC1562DC1C11EA7530DCB981E8359134BEABC8493B7B2258E" },
+  { name = "gleam_regexp", version = "1.1.1", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_regexp", source = "hex", outer_checksum = "9C215C6CA84A5B35BB934A9B61A9A306EC743153BE2B0425A0D032E477B062A9" },
+  { name = "gleam_stdlib", version = "1.0.3", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1F543AFBA5D33DA493E6087F4E4C4F20D899411343512686C98A8ABB2963CF22" },
+  { name = "gleam_time", version = "1.8.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_time", source = "hex", outer_checksum = "533D8723774D61AD4998324F5DD1DABDCDBFABAFB9E87CB5D03C6955448FC97D" },
+  { name = "glint", version = "1.3.0", build_tools = ["gleam"], requirements = ["gleam_community_ansi", "gleam_community_colour", "gleam_stdlib", "snag"], otp_app = "glint", source = "hex", outer_checksum = "26CCA9BC3ACB56CD9D754ACF598F49B4C281C4FDD81AE61FA21C8E92E9C8218E" },
+  { name = "glisten", version = "9.0.1", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib", "logging"], otp_app = "glisten", source = "hex", outer_checksum = "7795AA50830656F3A0316A6B26595F893C83272DA901B3405E31339CAA31A10B" },
+  { name = "gramps", version = "6.0.1", build_tools = ["gleam"], requirements = ["gleam_crypto", "gleam_erlang", "gleam_http", "gleam_stdlib"], otp_app = "gramps", source = "hex", outer_checksum = "D55636072DEE173F6586A5679D3C02EC7A0DE3F8646B78C351B72908FF223DF7" },
+  { name = "group_registry", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], otp_app = "group_registry", source = "hex", outer_checksum = "BC798A53D6F2406DB94E27CB45C57052CB56B32ACF7CC16EA20F6BAEC7E36B90" },
+  { name = "houdini", version = "1.2.1", build_tools = ["gleam"], requirements = [], otp_app = "houdini", source = "hex", outer_checksum = "6F8AC2F12974567FB744BEA66AC93CEB76AAEA19AD28564623F76CDA9BC26A85" },
+  { name = "hpack_erl", version = "0.3.0", build_tools = ["rebar3"], requirements = [], otp_app = "hpack", source = "hex", outer_checksum = "D6137D7079169D8C485C6962DFE261AF5B9EF60FBC557344511C1E65E3D95FB0" },
+  { name = "justin", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "justin", source = "hex", outer_checksum = "8B1C62269E8607D0A0ED698B7903984CE0BF7B6B3C0DEA3C6C8302B39402837B" },
+  { name = "logging", version = "1.5.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "logging", source = "hex", outer_checksum = "BC5F18CE5DD9686100229FE5409BDC3DD5C46D5A7DF2F804AD2D8F0DD6C5060E" },
+  { name = "lustre", version = "5.7.1", build_tools = ["gleam"], requirements = ["exception", "gleam_erlang", "gleam_json", "gleam_otp", "gleam_stdlib", "houdini"], otp_app = "lustre", source = "hex", outer_checksum = "663A2D1A3458914CA537A42AC07E601DD3FD85415EBDAF4717F2DFF6E86F90F9" },
+  { name = "lustre_dev_tools", version = "2.3.6", build_tools = ["gleam"], requirements = ["argv", "booklet", "filepath", "gleam_community_ansi", "gleam_crypto", "gleam_erlang", "gleam_http", "gleam_httpc", "gleam_json", "gleam_otp", "gleam_regexp", "gleam_stdlib", "glint", "group_registry", "justin", "lustre", "mist", "polly", "simplifile", "tom", "wisp"], otp_app = "lustre_dev_tools", source = "hex", outer_checksum = "7A650A107C7E767D902A8CB608460B927DE0CDD47D5BA04DED71F9F622FE6AD9" },
+  { name = "marceau", version = "1.3.0", build_tools = ["gleam"], requirements = [], otp_app = "marceau", source = "hex", outer_checksum = "2D1C27504BEF45005F5DFB18591F8610FB4BFA91744878210BDC464412EC44E9" },
+  { name = "mist", version = "6.0.3", build_tools = ["gleam"], requirements = ["exception", "gleam_erlang", "gleam_http", "gleam_otp", "gleam_stdlib", "glisten", "gramps", "hpack_erl", "logging"], otp_app = "mist", source = "hex", outer_checksum = "1B07F321D5FA0CB162D81496F2DE96AEB6EF8980F4F38230A4CC3F849497E020" },
+  { name = "platform", version = "1.0.0", build_tools = ["gleam"], requirements = [], otp_app = "platform", source = "hex", outer_checksum = "8339420A95AD89AAC0F82F4C3DB8DD401041742D6C3F46132A8739F6AEB75391" },
+  { name = "polly", version = "3.1.0", build_tools = ["gleam"], requirements = ["filepath", "gleam_erlang", "gleam_otp", "gleam_stdlib", "simplifile"], otp_app = "polly", source = "hex", outer_checksum = "51FB565D81FF6212FDF3306D44419601F2A7C4EDD1F00FC9DA5C376A00AED4FE" },
+  { name = "simplifile", version = "2.5.0", build_tools = ["gleam"], requirements = ["filepath", "gleam_stdlib"], otp_app = "simplifile", source = "hex", outer_checksum = "6C72DCCDF25C38A5931740B30E823969F33106831FD1637719B5EDBCA30027A4" },
+  { name = "snag", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "snag", source = "hex", outer_checksum = "274F41D6C3ECF99F7686FDCE54183333E41D2C1CA5A3A673F9A8B2C7A4401077" },
+  { name = "tom", version = "2.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "gleam_time"], otp_app = "tom", source = "hex", outer_checksum = "DCF04CB7AB35D58CFC598C66EA2E1816D160759802C89B2BA6238780D59BC256" },
+  { name = "wisp", version = "2.2.2", build_tools = ["gleam"], requirements = ["directories", "exception", "filepath", "gleam_crypto", "gleam_erlang", "gleam_http", "gleam_json", "gleam_stdlib", "houdini", "logging", "marceau", "mist", "simplifile"], otp_app = "wisp", source = "hex", outer_checksum = "5FF5F1E288C3437252ABB93D8F9CF42FF652CE7AD54480CFE736038DC09C4F22" },
+]
+
+[requirements]
+at = { path = "../../" }
+gleam_stdlib = { version = ">= 1.0.0 and < 2.0.0" }
+gleam_time = { version = ">= 1.8.0 and < 2.0.0" }
+lustre = { version = ">= 5.7.1 and < 6.0.0" }
+lustre_dev_tools = { version = ">= 2.3.6 and < 3.0.0" }
diff --git a/demo/tid/src/tid.css b/demo/tid/src/tid.css
new file mode 100644
index 0000000..e6f5724
--- /dev/null
+++ b/demo/tid/src/tid.css
@@ -0,0 +1,6 @@
+@import url(https://fonts.bunny.net/css?family=doto:800);
+@import "tailwindcss";
+
+@theme {
+  --font-mono: "Doto", monospace;
+}
diff --git a/demo/tid/src/tid.ffi.mjs b/demo/tid/src/tid.ffi.mjs
new file mode 100644
index 0000000..f842b78
--- /dev/null
+++ b/demo/tid/src/tid.ffi.mjs
@@ -0,0 +1 @@
+export const timezone = () => new Date().getTimezoneOffset() * -1;
diff --git a/demo/tid/src/tid.gleam b/demo/tid/src/tid.gleam
new file mode 100644
index 0000000..0072cc4
--- /dev/null
+++ b/demo/tid/src/tid.gleam
@@ -0,0 +1,262 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import at/tid.{type Tid}
+import gleam/bool
+import gleam/int
+import gleam/option.{type Option, None, Some}
+import gleam/string
+import gleam/time/duration
+import gleam/time/timestamp
+import lustre
+import lustre/attribute.{type Attribute}
+import lustre/effect.{type Effect}
+import lustre/element.{type Element}
+import lustre/element/html
+import lustre/event
+
+// MAIN ------------------------------------------------------------------------
+
+pub fn main() {
+  let clock = int.random(1024)
+  let tid = tid.now(clock)
+  let offset = timezone()
+  let app = lustre.application(init:, update:, view:)
+  let assert Ok(_) = lustre.start(app, "#app", Arguments(tid:, clock:, offset:))
+
+  Nil
+}
+
+@external(javascript, "./tid.ffi.mjs", "timezone")
+fn timezone() -> Int
+
+// MODEL -----------------------------------------------------------------------
+
+type Model {
+  Model(
+    tid: Tid,
+    clock: Int,
+    offset: Int,
+    ticks_until_clock: Int,
+    //
+    hovered: Option(TidPart),
+  )
+}
+
+type TidPart {
+  Timestamp
+  Clock
+}
+
+const ticks_until_clock = 60
+
+type Arguments {
+  Arguments(tid: Tid, clock: Int, offset: Int)
+}
+
+fn init(arguments: Arguments) -> #(Model, Effect(Message)) {
+  let model =
+    Model(
+      tid: arguments.tid,
+      clock: arguments.clock,
+      offset: arguments.offset,
+      ticks_until_clock:,
+      hovered: None,
+    )
+
+  let effect = generate_next_tid(arguments.tid)
+
+  #(model, effect)
+}
+
+// UPDATE ----------------------------------------------------------------------
+
+type Message {
+  ClockRefreshedTid(tid: Tid)
+  ClockSteppedTid(tid: Tid)
+  UserHoveredTidPart(part: Option(TidPart))
+}
+
+fn update(model: Model, message: Message) -> #(Model, Effect(Message)) {
+  case message {
+    ClockRefreshedTid(tid:) -> {
+      let model =
+        Model(..model, tid:, clock: tid.clock(tid), ticks_until_clock:)
+
+      let effect = generate_next_tid(tid)
+
+      #(model, effect)
+    }
+
+    ClockSteppedTid(tid:) if model.ticks_until_clock == 0 -> {
+      let model = Model(..model, tid:, ticks_until_clock:)
+      let effect = generate_new_tid()
+
+      #(model, effect)
+    }
+
+    ClockSteppedTid(tid:) -> {
+      let ticks_until_clock = model.ticks_until_clock - 1
+      let model = Model(..model, tid:, ticks_until_clock:)
+      let effect = generate_next_tid(tid)
+
+      #(model, effect)
+    }
+
+    UserHoveredTidPart(part:) -> {
+      let model =
+        Model(..model, hovered: case part == model.hovered {
+          True -> None
+          False -> part
+        })
+      let effect = effect.none()
+
+      #(model, effect)
+    }
+  }
+}
+
+fn generate_new_tid() -> Effect(Message) {
+  use dispatch, _ <- effect.after_paint
+  let clock = int.random(1024)
+  let tid = tid.now(clock)
+
+  dispatch(ClockRefreshedTid(tid:))
+}
+
+fn generate_next_tid(now: Tid) -> Effect(Message) {
+  use dispatch, _ <- effect.after_paint
+  let tid = tid.next(now)
+
+  dispatch(ClockSteppedTid(tid:))
+}
+
+// VIEW ------------------------------------------------------------------------
+
+fn view(model: Model) -> Element(Message) {
+  let part = case model.hovered {
+    Some(Timestamp) -> "timestamp"
+    Some(Clock) -> "clock"
+    None -> "none"
+  }
+
+  html.div([attribute.class("max-w-2xl mx-auto py-32")], [
+    html.h1([attribute.class("font-serif text-4xl")], [
+      html.text("Timestamp Ids"),
+    ]),
+
+    html.section(
+      [attribute.class("group cursor-default"), attribute.data("part", part)],
+      [
+        view_tid(model.tid),
+        view_tid_details(model.tid, model.offset),
+      ],
+    ),
+  ])
+}
+
+fn view_tid(tid: Tid) -> Element(Message) {
+  let base32 = tid.to_string(tid)
+
+  html.p(
+    [
+      attribute.class("tracking-widest"),
+      attribute.class(
+        "border border-slate-200 bg-slate-50 font-mono p-4 text-5xl",
+      ),
+    ],
+    [
+      view_tid_part(Timestamp, html.span, [], [
+        html.text(string.slice(base32, 0, 11)),
+      ]),
+      view_tid_part(Clock, html.span, [], [
+        html.text(string.slice(base32, 11, 2)),
+      ]),
+    ],
+  )
+}
+
+fn view_tid_details(tid: Tid, offset: Int) -> Element(Message) {
+  let rfc3339 =
+    timestamp.to_rfc3339(tid.to_timestamp(tid), duration.minutes(offset))
+
+  html.dl(
+    [
+      attribute.class("grid grid-cols-[auto_1fr] gap-x-8 gap-y-2 text-sm"),
+    ],
+    [
+      view_detail_label("datetime"),
+      view_tid_datetime(rfc3339, offset),
+      view_detail_label("microseconds"),
+      view_tid_part(Timestamp, html.dd, [attribute.class("tabular-nums")], [
+        html.text(int.to_string(tid.microseconds(tid))),
+      ]),
+      view_detail_label("clock"),
+      view_tid_part(Clock, html.dd, [attribute.class("tabular-nums")], [
+        html.text(int.to_string(tid.clock(tid))),
+      ]),
+    ],
+  )
+}
+
+fn view_detail_label(text: String) -> Element(Message) {
+  html.dt([attribute.class("")], [html.text(text)])
+}
+
+fn view_tid_datetime(rfc3339: String, offset: Int) -> Element(Message) {
+  html.dd([attribute.class("tabular-nums")], [
+    html.text(string.slice(rfc3339, 0, 10)),
+    html.text(" "),
+    html.text(string.slice(rfc3339, 11, 8)),
+    html.text(" "),
+    view_offset(offset),
+  ])
+}
+
+fn view_tid_part(
+  part: TidPart,
+  element: fn(List(Attribute(Message)), List(Element(Message))) ->
+    Element(Message),
+  attributes: List(Attribute(Message)),
+  children: List(Element(Message)),
+) -> Element(Message) {
+  case part {
+    Timestamp ->
+      element(
+        [
+          attribute.class("group-data-[part=timestamp]:text-blue-700"),
+          event.on_mouse_enter(UserHoveredTidPart(Some(Timestamp))),
+          event.on_mouse_leave(UserHoveredTidPart(None)),
+          ..attributes
+        ],
+        children,
+      )
+
+    Clock ->
+      element(
+        [
+          attribute.class("group-data-[part=clock]:text-blue-700"),
+          event.on_mouse_enter(UserHoveredTidPart(Some(Clock))),
+          event.on_mouse_leave(UserHoveredTidPart(None)),
+          ..attributes
+        ],
+        children,
+      )
+  }
+}
+
+fn view_offset(offset: Int) -> Element(message) {
+  use <- bool.guard(offset == 0, html.text(""))
+  let hours =
+    { int.absolute_value(offset) / 60 }
+    |> int.to_string
+    |> string.pad_start(2, "0")
+  let minutes =
+    { int.absolute_value(offset) % 60 }
+    |> int.to_string
+    |> string.pad_start(2, "0")
+
+  case offset < 0 {
+    True -> html.text("-" <> hours <> ":" <> minutes)
+    False -> html.text("+" <> hours <> ":" <> minutes)
+  }
+}