demo time (#27)

README.md

@@ -2,23 +2,55 @@
 
 **Pronounced `/ˈtʌɪmə/` or `/ˈtaɪmər/`.**
 
-# About
+`tim:r` is a TUI app to help organize one of the most important thing you might have in live: `time`!
-
-`tim:r` is a TUI app to help you to organize one of the most important thing you have in live: `time`!
 
 - `[t]imer` Check the time on anything you are you doing.
 - `[c]ountdown` Use it for your workout, yoga session, meditation, handstand or whatever.
 - `[p]omodoro` Organize your working time to be focused all the time by following the [Pomodoro Technique](https://en.wikipedia.org/wiki/Pomodoro_Technique).
 
+It's built with [`Ratatui`](https://ratatui.rs/) written in [Rust 🦀](https://www.rust-lang.org/).
 
-It's built with [`ratatui`](https://ratatui.rs/) ([Rust](https://www.rust-lang.org/)).
+# Preview
 
+_Side note:_ Theme colors depend on your terminal preferences.
 
-# Screens
+## Pomodoro
 
-_soon_
+<a href="demo/pomodoro.gif">
+  <img alt="pomodoro" src="demo/pomodoro.gif" />
+</a>
 
-# Args
+## Timer
+
+<a href="demo/timer.gif">
+  <img alt="pomodoro" src="demo/timer.gif" />
+</a>
+
+## Countdown
+
+<a href="demo/countdown.gif">
+  <img alt="countdown" src="demo/countdown.gif" />
+</a>
+
+## Change style
+
+<a href="demo/style.gif">
+  <img alt="style" src="demo/style.gif" />
+</a>
+
+## Toggle deciseconds
+
+<a href="demo/decis.gif">
+  <img alt="deciseconds" src="demo/decis.gif" />
+</a>
+
+## Menu
+
+<a href="demo/menu.gif">
+  <img alt="menu" src="demo/menu.gif" />
+</a>
+
+# Args ⚙️
 
 ```sh
 Usage: timr [OPTIONS]
@@ -34,7 +66,7 @@ Options:
   -h, --help                   Print help
 ```
 
-# Build from source
+# Build from source 🔧
 
 ## Requirements
 

demo/countdown.tape

@@ -0,0 +1,33 @@
+Output demo/countdown.gif
+
+# https://github.com/charmbracelet/vhs/blob/main/THEMES.md
+Set Theme "Builtin Solarized Light"
+
+Set FontSize 14
+Set Width 800
+Set Height 400
+Set Padding 0
+Set Margin 1
+
+# --- START ---
+Set LoopOffset 4
+Hide
+Type "cargo run -- -r -d -m c"
+Enter
+Sleep 0.2
+Show
+# --- COUNTDOWN ---
+Sleep 1
+Type "s"
+Sleep 1.4
+Type "s"
+Sleep 0.3
+Type "s"
+Sleep 0.3
+Type "e"
+Sleep 0.1
+Down@10ms 65
+Sleep 0.1
+Type "e"
+Sleep 0.1
+Sleep 3

demo/decis.tape

@@ -0,0 +1,23 @@
+Output demo/decis.gif
+
+# https://github.com/charmbracelet/vhs/blob/main/THEMES.md
+Set Theme "nord-light"
+
+Set FontSize 14
+Set Width 800
+Set Height 400
+Set Padding 0
+Set Margin 1
+
+# --- START ---
+Set LoopOffset 4
+Hide
+Type "cargo run -- -r -m t"
+Enter
+Sleep 0.2
+Show
+# --- STYLES ---
+Type "s"
+Sleep 0.2
+Type@0.4s "......."
+Sleep 0.2

demo/menu.tape

@@ -0,0 +1,30 @@
+Output demo/menu.gif
+
+# https://github.com/charmbracelet/vhs/blob/main/THEMES.md
+Set Theme "Apple Classic"
+
+Set FontSize 14
+Set Width 800
+Set Height 400
+Set Padding 0
+Set Margin 1
+
+# --- START ---
+Set LoopOffset 4
+Hide
+Type "cargo run -- -r -m p"
+Enter
+Sleep 0.2
+Show
+# --- STYLES ---
+Sleep 0.5
+Type "m"
+Sleep 0.5
+Type@0.5s "t"
+Type@0.5s "c"
+Type@0.5s "p"
+Type@0.5s "e"
+Right@0.5s
+Left@0.5s
+Type@0.5s "e"
+Sleep 0.5

demo/pomodoro.tape

@@ -0,0 +1,39 @@
+Output demo/pomodoro.gif
+
+# https://github.com/charmbracelet/vhs/blob/main/THEMES.md
+Set Theme "Catppuccin Frappe"
+
+Set FontSize 14
+Set Width 800
+Set Height 400
+Set Padding 0
+Set Margin 1
+
+# --- START ---
+Set LoopOffset 4
+Hide
+Type "cargo run -- -r -d -m p"
+Enter
+Sleep 0.2
+Show
+# --- POMODORO WORK ---
+Sleep 1
+Type "s"
+Sleep 2.3
+Type "e"
+Sleep 0.2
+Down@30ms 80
+Sleep 100ms
+Type "e"
+Sleep 3
+# --- POMODORO PAUSE ---
+Right
+Sleep 0.5
+Type "s"
+Sleep 2.3
+Type "e"
+Sleep 0.2
+Down@30ms 60
+Sleep 100ms
+Type "e"
+Sleep 3

demo/style.tape

@@ -0,0 +1,24 @@
+Output demo/style.gif
+
+# https://github.com/charmbracelet/vhs/blob/main/THEMES.md
+Set Theme "OneDark"
+
+Set FontSize 14
+Set Width 800
+Set Height 400
+Set Padding 0
+Set Margin 1
+
+# --- START ---
+Set LoopOffset 4
+Hide
+Type "cargo run -- -r -d -m c"
+Enter
+Sleep 0.2
+Show
+# --- STYLES ---
+Sleep 0.5
+Type "s"
+Sleep 0.5
+Type@0.7s ",,,,,,"
+Sleep 1

demo/timer.tape

@@ -0,0 +1,31 @@
+Output demo/timer.gif
+
+# https://github.com/charmbracelet/vhs/blob/main/THEMES.md
+Set Theme "Belafonte Day"
+
+Set FontSize 14
+Set Width 800
+Set Height 400
+Set Padding 0
+Set Margin 1
+
+# --- START ---
+Set LoopOffset 4
+Hide
+Type "cargo run -- -r -d -m t"
+Enter
+Sleep 0.2
+Show
+# --- TIMER ---
+Type "s"
+Sleep 1.4
+Type "s"
+Sleep 0.3
+Type "s"
+Sleep 0.3
+Type "e"
+Sleep 0.2
+Up@30ms 57
+Sleep 0.7
+Type "e"
+Sleep 4

justfile

@@ -31,3 +31,28 @@ lint:
 # run app
 run:
     cargo run
+
+# demos
+alias dp := demo-pomodoro
+demo-pomodoro:
+    vhs demo/pomodoro.tape
+
+alias dt := demo-timer
+demo-timer:
+    vhs demo/timer.tape
+
+alias dc := demo-countdown
+demo-countdown:
+    vhs demo/countdown.tape
+
+alias ds := demo-style
+demo-style:
+    vhs demo/style.tape
+
+alias dd := demo-decis
+demo-decis:
+    vhs demo/decis.tape
+
+alias dm := demo-menu
+demo-menu:
+    vhs demo/menu.tape