diff --git a/app/bin/generateMSDF.sh b/app/bin/generateMSDF.sh
new file mode 100644
index 0000000..dca50f2
--- /dev/null
+++ b/app/bin/generateMSDF.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+
+BASE_DIR=/home/nicwands/Documents/Dev/freelance/portfolio/braindrops.nicwands.com/app/
+
+msdf-atlas-gen \
+	-font "$BASE_DIR"/fonts/InstrumentSerif-Italic.ttf \
+	-fontname 'instrument-serif' \
+	-imageout instrument-serif-atlas.png \
+	-json instrument-serif-atlas.json \
+	-pxrange 14 \
+	-dimensions 1024 1024 \
+	-errorcorrection auto
diff --git a/app/package.json b/app/package.json
index a378b08..8c920b4 100644
--- a/app/package.json
+++ b/app/package.json
@@ -14,12 +14,18 @@
         "singleQuote": true
     },
     "dependencies": {
+        "@mapbox/tiny-sdf": "^2.2.0",
         "@tiptap/pm": "^3.28.0",
         "@tiptap/starter-kit": "^3.28.0",
         "@tiptap/vue-3": "^3.28.0",
+        "@tresjs/cientos": "^5.8.1",
+        "@tresjs/core": "^5.8.3",
         "fecha": "^4.2.3",
+        "fontfaceobserver": "^2.3.0",
+        "lodash": "^4.18.1",
         "sass": "^1.98.0",
         "sass-embedded": "^1.98.0",
+        "vite-plugin-glsl": "^1.6.0",
         "vue": "^3.5.30",
         "vue-router": "^5.2.0"
     },
diff --git a/app/public/splash-title/hanken-grotesk-atlas.json b/app/public/splash-title/hanken-grotesk-atlas.json
new file mode 100644
index 0000000..70fc539
--- /dev/null
+++ b/app/public/splash-title/hanken-grotesk-atlas.json
@@ -0,0 +1 @@
+{"atlas":{"type":"msdf","distanceRange":8,"distanceRangeMiddle":0,"size":170,"width":1024,"height":1024,"yOrigin":"bottom"},"name":"hanken-grotesk","metrics":{"emSize":1,"lineHeight":1.3029999999999999,"ascender":1,"descender":-0.30299999999999999,"underlineY":-0.14100000000000001,"underlineThickness":0.040000000000000001},"glyphs":[{"unicode":32,"advance":0.26000000000000001},{"unicode":33,"advance":0.248,"planeBounds":{"left":0.038705882352941173,"bottom":-0.026470588235294117,"right":0.2092941176470588,"top":0.72058823529411753},"atlasBounds":{"left":975.5,"bottom":580.5,"right":1004.5,"top":707.5}},{"unicode":34,"advance":0.35699999999999998,"planeBounds":{"left":0.02211764705882352,"bottom":0.38529411764705879,"right":0.33388235294117646,"top":0.72058823529411753},"atlasBounds":{"left":528.5,"bottom":134.5,"right":581.5,"top":191.5}},{"unicode":35,"advance":0.69600000000000006,"planeBounds":{"left":0.021529411764705894,"bottom":-0.026470588235294117,"right":0.67447058823529416,"top":0.72058823529411753},"atlasBounds":{"left":709.5,"bottom":450.5,"right":820.5,"top":577.5}},{"unicode":36,"advance":0.56000000000000005,"planeBounds":{"left":0.0015294117647058944,"bottom":-0.13823529411764704,"right":0.55447058823529416,"top":0.83235294117647063},"atlasBounds":{"left":216.5,"bottom":858.5,"right":310.5,"top":1023.5}},{"unicode":37,"advance":0.73899999999999999,"planeBounds":{"left":0.020000000000000004,"bottom":-0.038235294117647062,"right":0.71999999999999997,"top":0.73235294117647065},"atlasBounds":{"left":564.5,"bottom":712.5,"right":683.5,"top":843.5}},{"unicode":38,"advance":0.69600000000000006,"planeBounds":{"left":0.021588235294117637,"bottom":-0.061764705882352944,"right":0.68041176470588238,"top":0.73235294117647054},"atlasBounds":{"left":0.5,"bottom":708.5,"right":112.5,"top":843.5}},{"unicode":39,"advance":0.186,"planeBounds":{"left":0.022411764705882367,"bottom":0.38529411764705879,"right":0.16358823529411762,"top":0.72058823529411753},"atlasBounds":{"left":975.5,"bottom":37.5,"right":999.5,"top":94.5}},{"unicode":40,"advance":0.25900000000000001,"planeBounds":{"left":0.0062058823529411583,"bottom":-0.2323529411764706,"right":0.2767941176470588,"top":0.72058823529411753},"atlasBounds":{"left":525.5,"bottom":861.5,"right":571.5,"top":1023.5}},{"unicode":41,"advance":0.25900000000000001,"planeBounds":{"left":-0.017794117647058801,"bottom":-0.2323529411764706,"right":0.25279411764705884,"top":0.72058823529411753},"atlasBounds":{"left":572.5,"bottom":861.5,"right":618.5,"top":1023.5}},{"unicode":42,"advance":0.39900000000000002,"planeBounds":{"left":0.011264705882352923,"bottom":0.36176470588235293,"right":0.38773529411764701,"top":0.72058823529411753},"atlasBounds":{"left":910.5,"bottom":33.5,"right":974.5,"top":94.5}},{"unicode":43,"advance":0.56000000000000005,"planeBounds":{"left":0.0128529411764706,"bottom":-0.020588235294117647,"right":0.54814705882352943,"top":0.51470588235294124},"atlasBounds":{"left":709.5,"bottom":3.5,"right":800.5,"top":94.5}},{"unicode":44,"advance":0.23999999999999999,"planeBounds":{"left":-0.0014705882352940951,"bottom":-0.17941176470588235,"right":0.25147058823529417,"top":0.17941176470588235},"atlasBounds":{"left":977.5,"bottom":928.5,"right":1020.5,"top":989.5}},{"unicode":45,"advance":0.32700000000000001,"planeBounds":{"left":0.013999999999999993,"bottom":0.2323529411764706,"right":0.314,"top":0.36764705882352938},"atlasBounds":{"left":831.5,"bottom":9.5,"right":882.5,"top":32.5}},{"unicode":46,"advance":0.23999999999999999,"planeBounds":{"left":0.034705882352941184,"bottom":-0.026470588235294117,"right":0.20529411764705882,"top":0.14999999999999999},"atlasBounds":{"left":977.5,"bottom":897.5,"right":1006.5,"top":927.5}},{"unicode":47,"advance":0.41999999999999998,"planeBounds":{"left":-0.077558823529411805,"bottom":-0.23823529411764705,"right":0.4165588235294117,"top":0.72058823529411753},"atlasBounds":{"left":311.5,"bottom":860.5,"right":395.5,"top":1023.5}},{"unicode":48,"advance":0.56000000000000005,"planeBounds":{"left":0.018235294117647054,"bottom":-0.038235294117647062,"right":0.54176470588235282,"top":0.73235294117647065},"atlasBounds":{"left":684.5,"bottom":712.5,"right":773.5,"top":843.5}},{"unicode":49,"advance":0.56000000000000005,"planeBounds":{"left":0.072911764705882315,"bottom":-0.026470588235294117,"right":0.41408823529411759,"top":0.72058823529411753},"atlasBounds":{"left":414.5,"bottom":192.5,"right":472.5,"top":319.5}},{"unicode":50,"advance":0.56000000000000005,"planeBounds":{"left":0.014294117647058808,"bottom":-0.026470588235294117,"right":0.54370588235294115,"top":0.73235294117647065},"atlasBounds":{"left":90.5,"bottom":578.5,"right":180.5,"top":707.5}},{"unicode":51,"advance":0.56000000000000005,"planeBounds":{"left":-0.0083529411764706081,"bottom":-0.038235294117647062,"right":0.55635294117647049,"top":0.73235294117647065},"atlasBounds":{"left":774.5,"bottom":712.5,"right":870.5,"top":843.5}},{"unicode":52,"advance":0.56000000000000005,"planeBounds":{"left":-0.014117647058823547,"bottom":-0.026470588235294117,"right":0.5741176470588234,"top":0.72058823529411753},"atlasBounds":{"left":473.5,"bottom":192.5,"right":573.5,"top":319.5}},{"unicode":53,"advance":0.56000000000000005,"planeBounds":{"left":0.0020294117647058898,"bottom":-0.038235294117647062,"right":0.5549705882352941,"top":0.72058823529411764},"atlasBounds":{"left":428.5,"bottom":578.5,"right":522.5,"top":707.5}},{"unicode":54,"advance":0.56000000000000005,"planeBounds":{"left":-0.0084705882352941048,"bottom":-0.038235294117647062,"right":0.54447058823529415,"top":0.72058823529411764},"atlasBounds":{"left":523.5,"bottom":578.5,"right":617.5,"top":707.5}},{"unicode":55,"advance":0.56000000000000005,"planeBounds":{"left":0.0025294117647058942,"bottom":-0.026470588235294117,"right":0.55547058823529416,"top":0.72058823529411753},"atlasBounds":{"left":574.5,"bottom":192.5,"right":668.5,"top":319.5}},{"unicode":56,"advance":0.56000000000000005,"planeBounds":{"left":0.00058823529411764722,"bottom":-0.038235294117647062,"right":0.55941176470588239,"top":0.73235294117647065},"atlasBounds":{"left":871.5,"bottom":712.5,"right":966.5,"top":843.5}},{"unicode":57,"advance":0.56000000000000005,"planeBounds":{"left":0.0035294117647058942,"bottom":-0.026470588235294117,"right":0.55647058823529416,"top":0.73235294117647065},"atlasBounds":{"left":618.5,"bottom":578.5,"right":712.5,"top":707.5}},{"unicode":58,"advance":0.23999999999999999,"planeBounds":{"left":0.034705882352941184,"bottom":-0.026470588235294117,"right":0.20529411764705882,"top":0.49705882352941166},"atlasBounds":{"left":801.5,"bottom":5.5,"right":830.5,"top":94.5}},{"unicode":59,"advance":0.23999999999999999,"planeBounds":{"left":-0.018970588235294111,"bottom":-0.17941176470588235,"right":0.23397058823529412,"top":0.49705882352941172},"atlasBounds":{"left":732.5,"bottom":204.5,"right":775.5,"top":319.5}},{"unicode":60,"advance":0.56000000000000005,"planeBounds":{"left":0.0034705882352941194,"bottom":-0.032352941176470584,"right":0.55052941176470582,"top":0.52647058823529413},"atlasBounds":{"left":257.5,"bottom":96.5,"right":350.5,"top":191.5}},{"unicode":61,"advance":0.56000000000000005,"planeBounds":{"left":0.051088235294117643,"bottom":0.067647058823529407,"right":0.50991176470588229,"top":0.4264705882352941},"atlasBounds":{"left":831.5,"bottom":33.5,"right":909.5,"top":94.5}},{"unicode":62,"advance":0.56000000000000005,"planeBounds":{"left":0.0094705882352941195,"bottom":-0.032352941176470584,"right":0.55652941176470583,"top":0.52647058823529413},"atlasBounds":{"left":351.5,"bottom":96.5,"right":444.5,"top":191.5}},{"unicode":63,"advance":0.51500000000000001,"planeBounds":{"left":0.012323529411764718,"bottom":-0.026470588235294117,"right":0.49467647058823527,"top":0.73235294117647065},"atlasBounds":{"left":713.5,"bottom":578.5,"right":795.5,"top":707.5}},{"unicode":64,"advance":0.874,"planeBounds":{"left":0.028676470588235341,"bottom":-0.13823529411764704,"right":0.8463235294117647,"top":0.68529411764705883},"atlasBounds":{"left":619.5,"bottom":883.5,"right":758.5,"top":1023.5}},{"unicode":65,"advance":0.66100000000000003,"planeBounds":{"left":-0.01361764705882354,"bottom":-0.026470588235294117,"right":0.67461764705882343,"top":0.72058823529411753},"atlasBounds":{"left":194.5,"bottom":192.5,"right":311.5,"top":319.5}},{"unicode":66,"advance":0.60799999999999998,"planeBounds":{"left":0.046911764705882354,"bottom":-0.026470588235294117,"right":0.58808823529411769,"top":0.72058823529411753},"atlasBounds":{"left":101.5,"bottom":192.5,"right":193.5,"top":319.5}},{"unicode":67,"advance":0.70799999999999996,"planeBounds":{"left":0.0178235294117647,"bottom":-0.038235294117647062,"right":0.70017647058823529,"top":0.7382352941176471},"atlasBounds":{"left":113.5,"bottom":711.5,"right":229.5,"top":843.5}},{"unicode":68,"advance":0.67600000000000005,"planeBounds":{"left":0.046117647058823499,"bottom":-0.026470588235294117,"right":0.65788235294117636,"top":0.72058823529411753},"atlasBounds":{"left":914.5,"bottom":320.5,"right":1018.5,"top":447.5}},{"unicode":69,"advance":0.57999999999999996,"planeBounds":{"left":0.046617647058823507,"bottom":-0.026470588235294117,"right":0.55838235294117633,"top":0.72058823529411753},"atlasBounds":{"left":826.5,"bottom":320.5,"right":913.5,"top":447.5}},{"unicode":70,"advance":0.56000000000000005,"planeBounds":{"left":0.046617647058823507,"bottom":-0.026470588235294117,"right":0.55838235294117633,"top":0.72058823529411753},"atlasBounds":{"left":738.5,"bottom":320.5,"right":825.5,"top":447.5}},{"unicode":71,"advance":0.73399999999999999,"planeBounds":{"left":0.0178235294117647,"bottom":-0.038235294117647062,"right":0.70017647058823529,"top":0.7382352941176471},"atlasBounds":{"left":230.5,"bottom":711.5,"right":346.5,"top":843.5}},{"unicode":72,"advance":0.68800000000000006,"planeBounds":{"left":0.046941176470588208,"bottom":-0.026470588235294117,"right":0.64105882352941168,"top":0.72058823529411753},"atlasBounds":{"left":547.5,"bottom":320.5,"right":648.5,"top":447.5}},{"unicode":73,"advance":0.25800000000000001,"planeBounds":{"left":0.046647058823529416,"bottom":-0.026470588235294117,"right":0.21135294117647058,"top":0.72058823529411753},"atlasBounds":{"left":992.5,"bottom":450.5,"right":1020.5,"top":577.5}},{"unicode":74,"advance":0.55400000000000005,"planeBounds":{"left":-0.0023235294117647026,"bottom":-0.038235294117647062,"right":0.51532352941176462,"top":0.72058823529411764},"atlasBounds":{"left":886.5,"bottom":578.5,"right":974.5,"top":707.5}},{"unicode":75,"advance":0.65300000000000002,"planeBounds":{"left":0.046676470588235305,"bottom":-0.026470588235294117,"right":0.66432352941176465,"top":0.72058823529411753},"atlasBounds":{"left":199.5,"bottom":320.5,"right":304.5,"top":447.5}},{"unicode":76,"advance":0.501,"planeBounds":{"left":0.04714705882352941,"bottom":-0.026470588235294117,"right":0.51185294117647051,"top":0.72058823529411753},"atlasBounds":{"left":119.5,"bottom":320.5,"right":198.5,"top":447.5}},{"unicode":77,"advance":0.85099999999999998,"planeBounds":{"left":0.046088235294117645,"bottom":-0.026470588235294117,"right":0.80491176470588233,"top":0.72058823529411753},"atlasBounds":{"left":417.5,"bottom":320.5,"right":546.5,"top":447.5}},{"unicode":78,"advance":0.68500000000000005,"planeBounds":{"left":0.045441176470588242,"bottom":-0.026470588235294117,"right":0.63955882352941174,"top":0.72058823529411753},"atlasBounds":{"left":312.5,"bottom":192.5,"right":413.5,"top":319.5}},{"unicode":79,"advance":0.748,"planeBounds":{"left":0.017617647058823543,"bottom":-0.038235294117647062,"right":0.72938235294117648,"top":0.7382352941176471},"atlasBounds":{"left":347.5,"bottom":711.5,"right":468.5,"top":843.5}},{"unicode":80,"advance":0.55900000000000005,"planeBounds":{"left":0.044617647058823533,"bottom":-0.026470588235294117,"right":0.55638235294117633,"top":0.72058823529411753},"atlasBounds":{"left":821.5,"bottom":450.5,"right":908.5,"top":577.5}},{"unicode":81,"advance":0.78200000000000003,"planeBounds":{"left":0.016970588235294137,"bottom":-0.079411764705882348,"right":0.76402941176470573,"top":0.73823529411764699},"atlasBounds":{"left":759.5,"bottom":884.5,"right":886.5,"top":1023.5}},{"unicode":82,"advance":0.60699999999999998,"planeBounds":{"left":0.04664705882352941,"bottom":-0.026470588235294117,"right":0.61135294117647065,"top":0.72058823529411753},"atlasBounds":{"left":612.5,"bottom":450.5,"right":708.5,"top":577.5}},{"unicode":83,"advance":0.57200000000000006,"planeBounds":{"left":0.0055294117647058947,"bottom":-0.038235294117647062,"right":0.55847058823529416,"top":0.7382352941176471},"atlasBounds":{"left":469.5,"bottom":711.5,"right":563.5,"top":843.5}},{"unicode":84,"advance":0.58499999999999996,"planeBounds":{"left":-0.01388235294117646,"bottom":-0.026470588235294117,"right":0.59788235294117631,"top":0.72058823529411753},"atlasBounds":{"left":477.5,"bottom":450.5,"right":581.5,"top":577.5}},{"unicode":85,"advance":0.65700000000000003,"planeBounds":{"left":0.03976470588235291,"bottom":-0.038235294117647062,"right":0.61623529411764699,"top":0.72058823529411764},"atlasBounds":{"left":0.5,"bottom":448.5,"right":98.5,"top":577.5}},{"unicode":86,"advance":0.66600000000000004,"planeBounds":{"left":-0.01405882352941175,"bottom":-0.026470588235294117,"right":0.68005882352941172,"top":0.72058823529411753},"atlasBounds":{"left":0.5,"bottom":320.5,"right":118.5,"top":447.5}},{"unicode":87,"advance":0.97199999999999998,"planeBounds":{"left":-0.0081176470588235038,"bottom":-0.026470588235294117,"right":0.98011764705882354,"top":0.72058823529411753},"atlasBounds":{"left":308.5,"bottom":450.5,"right":476.5,"top":577.5}},{"unicode":88,"advance":0.66000000000000003,"planeBounds":{"left":-0.0077352941176470798,"bottom":-0.026470588235294117,"right":0.66873529411764698,"top":0.72058823529411753},"atlasBounds":{"left":192.5,"bottom":450.5,"right":307.5,"top":577.5}},{"unicode":89,"advance":0.61699999999999999,"planeBounds":{"left":-0.018470588235294138,"bottom":-0.026470588235294117,"right":0.63447058823529412,"top":0.72058823529411753},"atlasBounds":{"left":305.5,"bottom":320.5,"right":416.5,"top":447.5}},{"unicode":90,"advance":0.59799999999999998,"planeBounds":{"left":0.0038823529411764549,"bottom":-0.026470588235294117,"right":0.59211764705882342,"top":0.72058823529411753},"atlasBounds":{"left":0.5,"bottom":192.5,"right":100.5,"top":319.5}},{"unicode":91,"advance":0.28600000000000003,"planeBounds":{"left":0.039088235294117625,"bottom":-0.27352941176470585,"right":0.29791176470588232,"top":0.76764705882352935},"atlasBounds":{"left":24.5,"bottom":846.5,"right":68.5,"top":1023.5}},{"unicode":92,"advance":0.46000000000000002,"planeBounds":{"left":0.043941176470588247,"bottom":-0.23823529411764705,"right":0.5380588235294117,"top":0.72058823529411753},"atlasBounds":{"left":396.5,"bottom":860.5,"right":480.5,"top":1023.5}},{"unicode":93,"advance":0.28600000000000003,"planeBounds":{"left":-0.011911764705882347,"bottom":-0.27352941176470585,"right":0.24691176470588236,"top":0.76764705882352935},"atlasBounds":{"left":120.5,"bottom":846.5,"right":164.5,"top":1023.5}},{"unicode":94,"advance":0.60199999999999998,"planeBounds":{"left":0.0039411764705882387,"bottom":0.1852941176470588,"right":0.59805882352941175,"top":0.72058823529411764},"atlasBounds":{"left":607.5,"bottom":3.5,"right":708.5,"top":94.5}},{"unicode":95,"advance":0.46300000000000002,"planeBounds":{"left":-0.0008529411764705945,"bottom":-0.10882352941176469,"right":0.46385294117647058,"top":0.026470588235294117},"atlasBounds":{"left":883.5,"bottom":9.5,"right":962.5,"top":32.5}},{"unicode":96,"advance":0.30599999999999999,"planeBounds":{"left":0.017705882352941165,"bottom":0.52647058823529413,"right":0.28829411764705881,"top":0.72058823529411753},"atlasBounds":{"left":977.5,"bottom":990.5,"right":1023.5,"top":1023.5}},{"unicode":97,"advance":0.54400000000000004,"planeBounds":{"left":0.016941176470588241,"bottom":-0.038235294117647062,"right":0.51105882352941168,"top":0.52647058823529413},"atlasBounds":{"left":172.5,"bottom":95.5,"right":256.5,"top":191.5}},{"unicode":98,"advance":0.57899999999999996,"planeBounds":{"left":0.039235294117647035,"bottom":-0.038235294117647062,"right":0.56276470588235283,"top":0.72058823529411764},"atlasBounds":{"left":181.5,"bottom":578.5,"right":270.5,"top":707.5}},{"unicode":99,"advance":0.52100000000000002,"planeBounds":{"left":0.016941176470588251,"bottom":-0.038235294117647062,"right":0.51105882352941168,"top":0.52647058823529413},"atlasBounds":{"left":87.5,"bottom":95.5,"right":171.5,"top":191.5}},{"unicode":100,"advance":0.57899999999999996,"planeBounds":{"left":0.016235294117647049,"bottom":-0.038235294117647062,"right":0.53976470588235281,"top":0.72058823529411764},"atlasBounds":{"left":796.5,"bottom":578.5,"right":885.5,"top":707.5}},{"unicode":101,"advance":0.54100000000000004,"planeBounds":{"left":0.017058823529411755,"bottom":-0.038235294117647062,"right":0.52294117647058813,"top":0.52647058823529413},"atlasBounds":{"left":0.5,"bottom":95.5,"right":86.5,"top":191.5}},{"unicode":102,"advance":0.34400000000000003,"planeBounds":{"left":-0.01561764705882355,"bottom":-0.026470588235294117,"right":0.3726176470588235,"top":0.73235294117647065},"atlasBounds":{"left":271.5,"bottom":578.5,"right":337.5,"top":707.5}},{"unicode":103,"advance":0.52000000000000002,"planeBounds":{"left":0.010235294117647056,"bottom":-0.23823529411764705,"right":0.53376470588235281,"top":0.56176470588235294},"atlasBounds":{"left":887.5,"bottom":887.5,"right":976.5,"top":1023.5}},{"unicode":104,"advance":0.55900000000000005,"planeBounds":{"left":0.040823529411764703,"bottom":-0.026470588235294117,"right":0.52317647058823524,"top":0.72058823529411753},"atlasBounds":{"left":909.5,"bottom":450.5,"right":991.5,"top":577.5}},{"unicode":105,"advance":0.23900000000000002,"planeBounds":{"left":0.034205882352941183,"bottom":-0.026470588235294117,"right":0.20479411764705882,"top":0.72058823529411753},"atlasBounds":{"left":582.5,"bottom":450.5,"right":611.5,"top":577.5}},{"unicode":106,"advance":0.23900000000000002,"planeBounds":{"left":-0.04897058823529412,"bottom":-0.23823529411764705,"right":0.20397058823529413,"top":0.72058823529411753},"atlasBounds":{"left":481.5,"bottom":860.5,"right":524.5,"top":1023.5}},{"unicode":107,"advance":0.55000000000000004,"planeBounds":{"left":0.039176470588235292,"bottom":-0.026470588235294117,"right":0.55682352941176461,"top":0.72058823529411753},"atlasBounds":{"left":649.5,"bottom":320.5,"right":737.5,"top":447.5}},{"unicode":108,"advance":0.27300000000000002,"planeBounds":{"left":0.037852941176470582,"bottom":-0.038235294117647062,"right":0.27314705882352941,"top":0.72058823529411764},"atlasBounds":{"left":967.5,"bottom":714.5,"right":1007.5,"top":843.5}},{"unicode":109,"advance":0.83799999999999997,"planeBounds":{"left":0.039647058823529389,"bottom":-0.026470588235294117,"right":0.80435294117647049,"top":0.52647058823529413},"atlasBounds":{"left":0.5,"bottom":0.5,"right":130.5,"top":94.5}},{"unicode":110,"advance":0.55900000000000005,"planeBounds":{"left":0.040823529411764703,"bottom":-0.026470588235294117,"right":0.52317647058823524,"top":0.52647058823529413},"atlasBounds":{"left":131.5,"bottom":0.5,"right":213.5,"top":94.5}},{"unicode":111,"advance":0.57400000000000007,"planeBounds":{"left":0.016411764705882348,"bottom":-0.038235294117647062,"right":0.55758823529411772,"top":0.52647058823529413},"atlasBounds":{"left":855.5,"bottom":223.5,"right":947.5,"top":319.5}},{"unicode":112,"advance":0.57899999999999996,"planeBounds":{"left":0.039235294117647035,"bottom":-0.2323529411764706,"right":0.56276470588235283,"top":0.52647058823529413},"atlasBounds":{"left":338.5,"bottom":578.5,"right":427.5,"top":707.5}},{"unicode":113,"advance":0.57899999999999996,"planeBounds":{"left":0.016235294117647049,"bottom":-0.2323529411764706,"right":0.53976470588235281,"top":0.52647058823529413},"atlasBounds":{"left":0.5,"bottom":578.5,"right":89.5,"top":707.5}},{"unicode":114,"advance":0.41999999999999998,"planeBounds":{"left":0.040382352941176453,"bottom":-0.026470588235294117,"right":0.42861764705882349,"top":0.52647058823529413},"atlasBounds":{"left":948.5,"bottom":225.5,"right":1014.5,"top":319.5}},{"unicode":115,"advance":0.47100000000000003,"planeBounds":{"left":-0.0024117647058823628,"bottom":-0.038235294117647062,"right":0.45641176470588235,"top":0.52647058823529413},"atlasBounds":{"left":776.5,"bottom":223.5,"right":854.5,"top":319.5}},{"unicode":116,"advance":0.35999999999999999,"planeBounds":{"left":-0.014352941176470591,"bottom":-0.038235294117647062,"right":0.35035294117647053,"top":0.70294117647058818},"atlasBounds":{"left":669.5,"bottom":193.5,"right":731.5,"top":319.5}},{"unicode":117,"advance":0.55900000000000005,"planeBounds":{"left":0.034823529411764705,"bottom":-0.038235294117647062,"right":0.51717647058823524,"top":0.52058823529411768},"atlasBounds":{"left":445.5,"bottom":96.5,"right":527.5,"top":191.5}},{"unicode":118,"advance":0.53000000000000003,"planeBounds":{"left":-0.0055882352941176326,"bottom":-0.026470588235294117,"right":0.5355882352941177,"top":0.52058823529411768},"atlasBounds":{"left":214.5,"bottom":1.5,"right":306.5,"top":94.5}},{"unicode":119,"advance":0.752,"planeBounds":{"left":-0.0034117647058823112,"bottom":-0.026470588235294117,"right":0.75541176470588245,"top":0.52058823529411768},"atlasBounds":{"left":307.5,"bottom":1.5,"right":436.5,"top":94.5}},{"unicode":120,"advance":0.53400000000000003,"planeBounds":{"left":-0.0035882352941176534,"bottom":-0.026470588235294117,"right":0.5375882352941177,"top":0.52058823529411768},"atlasBounds":{"left":514.5,"bottom":1.5,"right":606.5,"top":94.5}},{"unicode":121,"advance":0.53000000000000003,"planeBounds":{"left":-0.0055882352941176326,"bottom":-0.2323529411764706,"right":0.5355882352941177,"top":0.52058823529411768},"atlasBounds":{"left":99.5,"bottom":449.5,"right":191.5,"top":577.5}},{"unicode":122,"advance":0.47100000000000003,"planeBounds":{"left":0.0099705882352941061,"bottom":-0.026470588235294117,"right":0.4570294117647058,"top":0.52058823529411768},"atlasBounds":{"left":437.5,"bottom":1.5,"right":513.5,"top":94.5}},{"unicode":123,"advance":0.26800000000000002,"planeBounds":{"left":-0.014558823529411779,"bottom":-0.27352941176470585,"right":0.27955882352941175,"top":0.76764705882352935},"atlasBounds":{"left":165.5,"bottom":846.5,"right":215.5,"top":1023.5}},{"unicode":124,"advance":0.26700000000000002,"planeBounds":{"left":0.0658529411764706,"bottom":-0.2794117647058823,"right":0.2011470588235294,"top":0.77352941176470591},"atlasBounds":{"left":0.5,"bottom":844.5,"right":23.5,"top":1023.5}},{"unicode":125,"advance":0.26800000000000002,"planeBounds":{"left":-0.011558823529411778,"bottom":-0.27352941176470585,"right":0.28255882352941175,"top":0.76764705882352935},"atlasBounds":{"left":69.5,"bottom":846.5,"right":119.5,"top":1023.5}},{"unicode":126,"advance":0.56000000000000005,"planeBounds":{"left":0.033441176470588203,"bottom":0.12647058823529411,"right":0.52755882352941175,"top":0.36764705882352938},"atlasBounds":{"left":582.5,"bottom":150.5,"right":666.5,"top":191.5}}],"kerning":[]}
diff --git a/app/public/splash-title/hanken-grotesk-atlas.png b/app/public/splash-title/hanken-grotesk-atlas.png
new file mode 100644
index 0000000..21028d8
Binary files /dev/null and b/app/public/splash-title/hanken-grotesk-atlas.png differ
diff --git a/app/public/splash-title/instrument-serif-atlas.json b/app/public/splash-title/instrument-serif-atlas.json
new file mode 100644
index 0000000..6b23dc9
--- /dev/null
+++ b/app/public/splash-title/instrument-serif-atlas.json
@@ -0,0 +1 @@
+{"atlas":{"type":"msdf","distanceRange":14,"distanceRangeMiddle":0,"size":159.75,"width":1024,"height":1024,"yOrigin":"bottom"},"name":"instrument-serif","metrics":{"emSize":1,"lineHeight":1.3,"ascender":0.98999999999999999,"descender":-0.31,"underlineY":-0.19900000000000001,"underlineThickness":0.037999999999999999},"glyphs":[{"unicode":32,"advance":0.17000000000000001},{"unicode":33,"advance":0.27500000000000002,"planeBounds":{"left":-0.011152973395931128,"bottom":-0.053208137715179966,"right":0.32687519561815337,"top":0.79186228482003118},"atlasBounds":{"left":319.5,"bottom":721.5,"right":373.5,"top":856.5}},{"unicode":34,"advance":0.374,"planeBounds":{"left":0.11862069640062602,"bottom":0.44131455399061031,"right":0.44412930359937408,"top":0.77934272300469476},"atlasBounds":{"left":307.5,"bottom":27.5,"right":359.5,"top":81.5}},{"unicode":35,"advance":0.629,"planeBounds":{"left":-0.0057879499217527068,"bottom":-0.046948356807511735,"right":0.68278794992175285,"top":0.76682316118935834},"atlasBounds":{"left":0.5,"bottom":312.5,"right":110.5,"top":442.5}},{"unicode":36,"advance":0.42399999999999999,"planeBounds":{"left":-0.041262910798122089,"bottom":-0.15336463223787167,"right":0.4908184663536776,"top":0.87949921752738658},"atlasBounds":{"left":106.5,"bottom":858.5,"right":191.5,"top":1023.5}},{"unicode":37,"advance":0.59099999999999997,"planeBounds":{"left":-0.03507834507042254,"bottom":-0.059467918622848205,"right":0.67853667840375576,"top":0.77308294209702666},"atlasBounds":{"left":880.5,"bottom":723.5,"right":994.5,"top":856.5}},{"unicode":38,"advance":0.52500000000000002,"planeBounds":{"left":-0.02772926447574333,"bottom":-0.053208137715179966,"right":0.58572926447574336,"top":0.77934272300469476},"atlasBounds":{"left":0.5,"bottom":576.5,"right":98.5,"top":709.5}},{"unicode":39,"advance":0.23500000000000001,"planeBounds":{"left":0.11797828638497654,"bottom":0.44131455399061031,"right":0.30577171361502348,"top":0.77934272300469476},"atlasBounds":{"left":984.5,"bottom":465.5,"right":1014.5,"top":519.5}},{"unicode":40,"advance":0.34600000000000003,"planeBounds":{"left":0.033349267321098351,"bottom":-0.16588419405320812,"right":0.45901436904253812,"top":0.77934272300469476},"atlasBounds":{"left":520.5,"bottom":872.5,"right":588.5,"top":1023.5}},{"unicode":41,"advance":0.34600000000000003,"planeBounds":{"left":-0.089014369042538052,"bottom":-0.16588419405320812,"right":0.33665073267890172,"top":0.77934272300469476},"atlasBounds":{"left":589.5,"bottom":872.5,"right":657.5,"top":1023.5}},{"unicode":42,"advance":0.44900000000000001,"planeBounds":{"left":0.090228658274432952,"bottom":0.37245696400625977,"right":0.50963397908820451,"top":0.7981220657276995},"atlasBounds":{"left":87.5,"bottom":13.5,"right":154.5,"top":81.5}},{"unicode":43,"advance":0.53100000000000003,"planeBounds":{"left":0.038658360418923794,"bottom":0.10328638497652583,"right":0.54570061394005054,"top":0.63536776212832546},"atlasBounds":{"left":892.5,"bottom":95.5,"right":973.5,"top":180.5}},{"unicode":44,"advance":0.219,"planeBounds":{"left":-0.082065727699530494,"bottom":-0.20344287949921752,"right":0.16206572769953054,"top":0.14084507042253516},"atlasBounds":{"left":984.5,"bottom":520.5,"right":1023.5,"top":575.5}},{"unicode":45,"advance":0.42599999999999999,"planeBounds":{"left":0.039275731310942585,"bottom":0.20970266040688576,"right":0.39608324304803177,"top":0.34115805946791866},"atlasBounds":{"left":917.5,"bottom":322.5,"right":974.5,"top":343.5}},{"unicode":46,"advance":0.219,"planeBounds":{"left":-0.030526604068857589,"bottom":-0.053208137715179966,"right":0.16352660406885758,"top":0.14084507042253522},"atlasBounds":{"left":957.5,"bottom":579.5,"right":988.5,"top":610.5}},{"unicode":47,"advance":0.25800000000000001,"planeBounds":{"left":-0.12293248379163874,"bottom":-0.17840375586854459,"right":0.41540867426782918,"top":0.83568075117370899},"atlasBounds":{"left":285.5,"bottom":861.5,"right":371.5,"top":1023.5}},{"unicode":48,"advance":0.46100000000000002,"planeBounds":{"left":0.0014788732394366581,"bottom":-0.053208137715179966,"right":0.50852112676056338,"top":0.77934272300469476},"atlasBounds":{"left":99.5,"bottom":576.5,"right":180.5,"top":709.5}},{"unicode":49,"advance":0.248,"planeBounds":{"left":-0.093979655712050067,"bottom":-0.046948356807511735,"right":0.30664632237871675,"top":0.77934272300469476},"atlasBounds":{"left":892.5,"bottom":577.5,"right":956.5,"top":709.5}},{"unicode":50,"advance":0.40400000000000003,"planeBounds":{"left":-0.080190140845070396,"bottom":-0.046948356807511735,"right":0.48319014084507045,"top":0.77934272300469476},"atlasBounds":{"left":0.5,"bottom":443.5,"right":90.5,"top":575.5}},{"unicode":51,"advance":0.373,"planeBounds":{"left":-0.066261345852895115,"bottom":-0.053208137715179966,"right":0.42826134585289516,"top":0.77934272300469476},"atlasBounds":{"left":181.5,"bottom":576.5,"right":260.5,"top":709.5}},{"unicode":52,"advance":0.39400000000000002,"planeBounds":{"left":-0.042641236306729217,"bottom":-0.046948356807511735,"right":0.45814123630672932,"top":0.76682316118935834},"atlasBounds":{"left":462.5,"bottom":181.5,"right":542.5,"top":311.5}},{"unicode":53,"advance":0.38700000000000001,"planeBounds":{"left":-0.076419097920858464,"bottom":-0.053208137715179966,"right":0.50574052649228707,"top":0.79186228482003118},"atlasBounds":{"left":374.5,"bottom":721.5,"right":467.5,"top":856.5}},{"unicode":54,"advance":0.41100000000000003,"planeBounds":{"left":-0.012910798122065695,"bottom":-0.053208137715179966,"right":0.51291079812206575,"top":0.77934272300469476},"atlasBounds":{"left":261.5,"bottom":576.5,"right":345.5,"top":709.5}},{"unicode":55,"advance":0.36499999999999999,"planeBounds":{"left":-0.015244131455399053,"bottom":-0.046948356807511735,"right":0.51057746478873245,"top":0.76682316118935834},"atlasBounds":{"left":543.5,"bottom":181.5,"right":627.5,"top":311.5}},{"unicode":56,"advance":0.437,"planeBounds":{"left":-0.035300469483568055,"bottom":-0.053208137715179966,"right":0.50930046948356811,"top":0.77934272300469476},"atlasBounds":{"left":936.5,"bottom":890.5,"right":1023.5,"top":1023.5}},{"unicode":57,"advance":0.41400000000000003,"planeBounds":{"left":-0.04991079812206569,"bottom":-0.053208137715179966,"right":0.47591079812206577,"top":0.77934272300469476},"atlasBounds":{"left":346.5,"bottom":576.5,"right":430.5,"top":709.5}},{"unicode":58,"advance":0.29899999999999999,"planeBounds":{"left":-0.030845070422535217,"bottom":-0.053208137715179966,"right":0.25084507042253523,"top":0.52269170579029745},"atlasBounds":{"left":846.5,"bottom":88.5,"right":891.5,"top":180.5}},{"unicode":59,"advance":0.30099999999999999,"planeBounds":{"left":-0.081384194053208139,"bottom":-0.20344287949921752,"right":0.25038419405320816,"top":0.52269170579029733},"atlasBounds":{"left":877.5,"bottom":195.5,"right":930.5,"top":311.5}},{"unicode":60,"advance":0.53100000000000003,"planeBounds":{"left":0.039316600457445491,"bottom":0.1533646322378717,"right":0.57765775851691337,"top":0.57902973395931145},"atlasBounds":{"left":0.5,"bottom":13.5,"right":86.5,"top":81.5}},{"unicode":61,"advance":0.53100000000000003,"planeBounds":{"left":0.016749127242084938,"bottom":0.20970266040688576,"right":0.56760984711688933,"top":0.53521126760563376},"atlasBounds":{"left":360.5,"bottom":29.5,"right":448.5,"top":81.5}},{"unicode":62,"advance":0.53100000000000003,"planeBounds":{"left":0.0045505748164198865,"bottom":0.1533646322378717,"right":0.54289173287588777,"top":0.57902973395931145},"atlasBounds":{"left":155.5,"bottom":13.5,"right":241.5,"top":81.5}},{"unicode":63,"advance":0.35799999999999998,"planeBounds":{"left":0.0015375586854460392,"bottom":-0.053208137715179966,"right":0.43346244131455397,"top":0.7981220657276995},"atlasBounds":{"left":198.5,"bottom":720.5,"right":267.5,"top":856.5}},{"unicode":64,"advance":0.66500000000000004,"planeBounds":{"left":-0.012047730829420917,"bottom":-0.12832550860719874,"right":0.68904773082942095,"top":0.62910798122065725},"atlasBounds":{"left":708.5,"bottom":190.5,"right":820.5,"top":311.5}},{"unicode":65,"advance":0.45700000000000002,"planeBounds":{"left":-0.11907981220657274,"bottom":-0.046948356807511735,"right":0.46307981220657279,"top":0.77934272300469476},"atlasBounds":{"left":310.5,"bottom":443.5,"right":403.5,"top":575.5}},{"unicode":66,"advance":0.47900000000000004,"planeBounds":{"left":-0.082229264475743302,"bottom":-0.046948356807511735,"right":0.53122926447574337,"top":0.76682316118935834},"atlasBounds":{"left":0.5,"bottom":181.5,"right":98.5,"top":311.5}},{"unicode":67,"advance":0.47500000000000003,"planeBounds":{"left":0.010415793908751724,"bottom":-0.053208137715179966,"right":0.56127651378355614,"top":0.77934272300469476},"atlasBounds":{"left":431.5,"bottom":576.5,"right":519.5,"top":709.5}},{"unicode":68,"advance":0.53600000000000003,"planeBounds":{"left":-0.081138497652582117,"bottom":-0.046948356807511735,"right":0.57613849765258218,"top":0.76682316118935834},"atlasBounds":{"left":811.5,"bottom":312.5,"right":916.5,"top":442.5}},{"unicode":69,"advance":0.45400000000000001,"planeBounds":{"left":-0.081585819576959984,"bottom":-0.046948356807511735,"right":0.54439227118986322,"top":0.76682316118935834},"atlasBounds":{"left":710.5,"bottom":312.5,"right":810.5,"top":442.5}},{"unicode":70,"advance":0.41100000000000003,"planeBounds":{"left":-0.081812597809076668,"bottom":-0.046948356807511735,"right":0.5316459311424101,"top":0.76682316118935834},"atlasBounds":{"left":611.5,"bottom":312.5,"right":709.5,"top":442.5}},{"unicode":71,"advance":0.51400000000000001,"planeBounds":{"left":0.0070549687010955028,"bottom":-0.053208137715179966,"right":0.57669503129890454,"top":0.77934272300469476},"atlasBounds":{"left":520.5,"bottom":576.5,"right":611.5,"top":709.5}},{"unicode":72,"advance":0.54500000000000004,"planeBounds":{"left":-0.081716744913927955,"bottom":-0.046948356807511735,"right":0.67571674491392808,"top":0.76682316118935834},"atlasBounds":{"left":406.5,"bottom":312.5,"right":527.5,"top":442.5}},{"unicode":73,"advance":0.25,"planeBounds":{"left":-0.08211189358372456,"bottom":-0.046948356807511735,"right":0.38111189358372455,"top":0.76682316118935834},"atlasBounds":{"left":331.5,"bottom":312.5,"right":405.5,"top":442.5}},{"unicode":74,"advance":0.251,"planeBounds":{"left":-0.19644992175273862,"bottom":-0.25978090766823164,"right":0.37944992175273873,"top":0.76682316118935845},"atlasBounds":{"left":192.5,"bottom":859.5,"right":284.5,"top":1023.5}},{"unicode":75,"advance":0.499,"planeBounds":{"left":-0.082197183098591517,"bottom":-0.046948356807511735,"right":0.65019718309859154,"top":0.76682316118935834},"atlasBounds":{"left":111.5,"bottom":312.5,"right":228.5,"top":442.5}},{"unicode":76,"advance":0.41400000000000003,"planeBounds":{"left":-0.082026017214397451,"bottom":-0.046948356807511735,"right":0.43127601721439757,"top":0.76682316118935834},"atlasBounds":{"left":528.5,"bottom":312.5,"right":610.5,"top":442.5}},{"unicode":77,"advance":0.66500000000000004,"planeBounds":{"left":-0.088554773082942032,"bottom":-0.046948356807511735,"right":0.78155477308294219,"top":0.76682316118935834},"atlasBounds":{"left":99.5,"bottom":181.5,"right":238.5,"top":311.5}},{"unicode":78,"advance":0.54200000000000004,"planeBounds":{"left":-0.083349097855104415,"bottom":-0.053208137715179966,"right":0.6740843919727515,"top":0.76682316118935845},"atlasBounds":{"left":807.5,"bottom":444.5,"right":928.5,"top":575.5}},{"unicode":79,"advance":0.54000000000000004,"planeBounds":{"left":0.0096799687010954896,"bottom":-0.053208137715179966,"right":0.57932003129890453,"top":0.77934272300469476},"atlasBounds":{"left":612.5,"bottom":576.5,"right":703.5,"top":709.5}},{"unicode":80,"advance":0.46900000000000003,"planeBounds":{"left":-0.082748826291079769,"bottom":-0.046948356807511735,"right":0.55574882629107991,"top":0.76682316118935834},"atlasBounds":{"left":239.5,"bottom":181.5,"right":341.5,"top":311.5}},{"unicode":81,"advance":0.54100000000000004,"planeBounds":{"left":-0.077138497652582114,"bottom":-0.25978090766823164,"right":0.58013849765258219,"top":0.77934272300469476},"atlasBounds":{"left":0.5,"bottom":857.5,"right":105.5,"top":1023.5}},{"unicode":82,"advance":0.52500000000000002,"planeBounds":{"left":-0.082508607198747988,"bottom":-0.053208137715179966,"right":0.56850860719874796,"top":0.76682316118935845},"atlasBounds":{"left":604.5,"bottom":444.5,"right":708.5,"top":575.5}},{"unicode":83,"advance":0.42399999999999999,"planeBounds":{"left":-0.041262910798122089,"bottom":-0.053208137715179966,"right":0.4908184663536776,"top":0.77934272300469476},"atlasBounds":{"left":704.5,"bottom":576.5,"right":789.5,"top":709.5}},{"unicode":84,"advance":0.46100000000000002,"planeBounds":{"left":0.0043584791577749469,"bottom":-0.046948356807511735,"right":0.5927778844785887,"top":0.77934272300469476},"atlasBounds":{"left":404.5,"bottom":443.5,"right":498.5,"top":575.5}},{"unicode":85,"advance":0.53700000000000003,"planeBounds":{"left":0.025112082456424382,"bottom":-0.053208137715179966,"right":0.67612929685392043,"top":0.76682316118935845},"atlasBounds":{"left":499.5,"bottom":444.5,"right":603.5,"top":575.5}},{"unicode":86,"advance":0.45800000000000002,"planeBounds":{"left":0.042920187793427253,"bottom":-0.059467918622848205,"right":0.62507981220657283,"top":0.76682316118935834},"atlasBounds":{"left":216.5,"bottom":443.5,"right":309.5,"top":575.5}},{"unicode":87,"advance":0.65300000000000002,"planeBounds":{"left":0.043393583724569681,"bottom":-0.059467918622848205,"right":0.81960641627543029,"top":0.76682316118935834},"atlasBounds":{"left":91.5,"bottom":443.5,"right":215.5,"top":575.5}},{"unicode":88,"advance":0.54500000000000004,"planeBounds":{"left":-0.081109137919303256,"bottom":-0.046948356807511735,"right":0.66380479009321636,"top":0.76682316118935834},"atlasBounds":{"left":342.5,"bottom":181.5,"right":461.5,"top":311.5}},{"unicode":89,"advance":0.47800000000000004,"planeBounds":{"left":0.012881064162754335,"bottom":-0.046948356807511735,"right":0.64511893583724567,"top":0.76682316118935834},"atlasBounds":{"left":229.5,"bottom":312.5,"right":330.5,"top":442.5}},{"unicode":90,"advance":0.42699999999999999,"planeBounds":{"left":-0.084118935837245667,"bottom":-0.046948356807511735,"right":0.54811893583724569,"top":0.78560250391236308},"atlasBounds":{"left":790.5,"bottom":576.5,"right":891.5,"top":709.5}},{"unicode":91,"advance":0.32600000000000001,"planeBounds":{"left":-0.036428431701319021,"bottom":-0.14710485133020346,"right":0.42053557455846186,"top":0.78560250391236308},"atlasBounds":{"left":658.5,"bottom":874.5,"right":731.5,"top":1023.5}},{"unicode":92,"advance":0.25600000000000001,"planeBounds":{"left":0.08553208137715182,"bottom":-0.17840375586854459,"right":0.20446791862284822,"top":0.83568075117370899},"atlasBounds":{"left":426.5,"bottom":861.5,"right":445.5,"top":1023.5}},{"unicode":93,"advance":0.32600000000000001,"planeBounds":{"left":-0.064535574558461872,"bottom":-0.14710485133020346,"right":0.39242843170131897,"top":0.78560250391236308},"atlasBounds":{"left":732.5,"bottom":874.5,"right":805.5,"top":1023.5}},{"unicode":94,"advance":0.43099999999999999,"planeBounds":{"left":0.071603677621283307,"bottom":0.43505477308294205,"right":0.47222965571205011,"top":0.78560250391236308},"atlasBounds":{"left":242.5,"bottom":25.5,"right":306.5,"top":81.5}},{"unicode":95,"advance":0.372,"planeBounds":{"left":-0.11307718025323656,"bottom":-0.15336463223787167,"right":0.32510748328353967,"top":-0.028169014084507039},"atlasBounds":{"left":533.5,"bottom":61.5,"right":603.5,"top":81.5}},{"unicode":96,"advance":0.35499999999999998,"planeBounds":{"left":0.11826525821596248,"bottom":0.53521126760563376,"right":0.41873474178403758,"top":0.78560250391236297},"atlasBounds":{"left":974.5,"bottom":140.5,"right":1022.5,"top":180.5}},{"unicode":97,"advance":0.47400000000000003,"planeBounds":{"left":-0.033540688575899834,"bottom":-0.053208137715179966,"right":0.49854068857589984,"top":0.56025039123630682},"atlasBounds":{"left":128.5,"bottom":82.5,"right":213.5,"top":180.5}},{"unicode":98,"advance":0.43099999999999999,"planeBounds":{"left":-0.012045587534871029,"bottom":-0.053208137715179966,"right":0.46369776144791458,"top":0.79186228482003118},"atlasBounds":{"left":550.5,"bottom":721.5,"right":626.5,"top":856.5}},{"unicode":99,"advance":0.35100000000000003,"planeBounds":{"left":-0.029165884194053179,"bottom":-0.053208137715179966,"right":0.39649921752738659,"top":0.56025039123630682},"atlasBounds":{"left":532.5,"bottom":82.5,"right":600.5,"top":180.5}},{"unicode":100,"advance":0.47400000000000003,"planeBounds":{"left":-0.032630359937402161,"bottom":-0.053208137715179966,"right":0.51823035993740219,"top":0.79186228482003118},"atlasBounds":{"left":627.5,"bottom":721.5,"right":715.5,"top":856.5}},{"unicode":101,"advance":0.34800000000000003,"planeBounds":{"left":-0.034592331768388079,"bottom":-0.053208137715179966,"right":0.40359233176838816,"top":0.56025039123630682},"atlasBounds":{"left":296.5,"bottom":82.5,"right":366.5,"top":180.5}},{"unicode":102,"advance":0.27300000000000002,"planeBounds":{"left":-0.025152924491392781,"bottom":-0.046948356807511735,"right":0.4505904244913928,"top":0.79186228482003129},"atlasBounds":{"left":803.5,"bottom":722.5,"right":879.5,"top":856.5}},{"unicode":103,"advance":0.40100000000000002,"planeBounds":{"left":-0.11285915492957745,"bottom":-0.26604068857589991,"right":0.50685915492957745,"top":0.647887323943662},"atlasBounds":{"left":0.5,"bottom":710.5,"right":99.5,"top":856.5}},{"unicode":104,"advance":0.47600000000000003,"planeBounds":{"left":-0.0389352849120869,"bottom":-0.053208137715179966,"right":0.499405873147381,"top":0.79186228482003118},"atlasBounds":{"left":716.5,"bottom":721.5,"right":802.5,"top":856.5}},{"unicode":105,"advance":0.28800000000000003,"planeBounds":{"left":-0.025514084507042224,"bottom":-0.059467918622848205,"right":0.31251408450704232,"top":0.7543035993740218},"atlasBounds":{"left":929.5,"bottom":445.5,"right":983.5,"top":575.5}},{"unicode":106,"advance":0.26600000000000001,"planeBounds":{"left":-0.15148200312989041,"bottom":-0.25978090766823164,"right":0.30548200312989049,"top":0.7543035993740218},"atlasBounds":{"left":446.5,"bottom":861.5,"right":519.5,"top":1023.5}},{"unicode":107,"advance":0.44700000000000001,"planeBounds":{"left":-0.03778583264291633,"bottom":-0.053208137715179966,"right":0.4692564208782104,"top":0.79186228482003118},"atlasBounds":{"left":468.5,"bottom":721.5,"right":549.5,"top":856.5}},{"unicode":108,"advance":0.23999999999999999,"planeBounds":{"left":-0.026824152321335389,"bottom":-0.059467918622848205,"right":0.28616489306207615,"top":0.79186228482003129},"atlasBounds":{"left":268.5,"bottom":720.5,"right":318.5,"top":856.5}},{"unicode":109,"advance":0.745,"planeBounds":{"left":-0.026609724000569046,"bottom":-0.053208137715179966,"right":0.7683824512732963,"top":0.56025039123630682},"atlasBounds":{"left":0.5,"bottom":82.5,"right":127.5,"top":180.5}},{"unicode":110,"advance":0.52100000000000002,"planeBounds":{"left":-0.025933667662540853,"bottom":-0.053208137715179966,"right":0.54370639493526818,"top":0.56025039123630682},"atlasBounds":{"left":677.5,"bottom":82.5,"right":768.5,"top":180.5}},{"unicode":111,"advance":0.41400000000000003,"planeBounds":{"left":-0.025111893583724541,"bottom":-0.053208137715179966,"right":0.4381118935837246,"top":0.56025039123630682},"atlasBounds":{"left":367.5,"bottom":82.5,"right":441.5,"top":180.5}},{"unicode":112,"advance":0.45000000000000001,"planeBounds":{"left":-0.13309937402190919,"bottom":-0.25352112676056338,"right":0.47409937402190927,"top":0.62910798122065725},"atlasBounds":{"left":100.5,"bottom":715.5,"right":197.5,"top":856.5}},{"unicode":113,"advance":0.42499999999999999,"planeBounds":{"left":-0.030980095852895118,"bottom":-0.25352112676056338,"right":0.46354259585289515,"top":0.56025039123630671},"atlasBounds":{"left":628.5,"bottom":181.5,"right":707.5,"top":311.5}},{"unicode":114,"advance":0.36799999999999999,"planeBounds":{"left":-0.026485310855029146,"bottom":-0.046948356807511735,"right":0.44925803812775644,"top":0.56025039123630682},"atlasBounds":{"left":769.5,"bottom":83.5,"right":845.5,"top":180.5}},{"unicode":115,"advance":0.30199999999999999,"planeBounds":{"left":-0.061760269953051596,"bottom":-0.053208137715179966,"right":0.35138526995305164,"top":0.56025039123630682},"atlasBounds":{"left":957.5,"bottom":611.5,"right":1023.5,"top":709.5}},{"unicode":116,"advance":0.27200000000000002,"planeBounds":{"left":-0.0067845999608763486,"bottom":-0.053208137715179966,"right":0.33750334996087633,"top":0.6979655712050078},"atlasBounds":{"left":821.5,"bottom":191.5,"right":876.5,"top":311.5}},{"unicode":117,"advance":0.50800000000000001,"planeBounds":{"left":-0.024468145128078385,"bottom":-0.053208137715179966,"right":0.53265235565439417,"top":0.56025039123630682},"atlasBounds":{"left":442.5,"bottom":82.5,"right":531.5,"top":180.5}},{"unicode":118,"advance":0.41200000000000003,"planeBounds":{"left":-0.025641784037558686,"bottom":-0.053208137715179966,"right":0.4438417840375587,"top":0.56025039123630682},"atlasBounds":{"left":601.5,"bottom":82.5,"right":676.5,"top":180.5}},{"unicode":119,"advance":0.60899999999999999,"planeBounds":{"left":-0.025668388106416275,"bottom":-0.053208137715179966,"right":0.63786838810641622,"top":0.56025039123630682},"atlasBounds":{"left":917.5,"bottom":344.5,"right":1023.5,"top":442.5}},{"unicode":120,"advance":0.45000000000000001,"planeBounds":{"left":-0.068449921752738618,"bottom":-0.059467918622848205,"right":0.50744992175273873,"top":0.56025039123630671},"atlasBounds":{"left":931.5,"bottom":212.5,"right":1023.5,"top":311.5}},{"unicode":121,"advance":0.41799999999999998,"planeBounds":{"left":-0.15309937402190921,"bottom":-0.25978090766823164,"right":0.45409937402190931,"top":0.56025039123630682},"atlasBounds":{"left":709.5,"bottom":444.5,"right":806.5,"top":575.5}},{"unicode":122,"advance":0.38500000000000001,"planeBounds":{"left":-0.059021126760563335,"bottom":-0.053208137715179966,"right":0.44802112676056344,"top":0.56025039123630682},"atlasBounds":{"left":214.5,"bottom":82.5,"right":295.5,"top":180.5}},{"unicode":123,"advance":0.32000000000000001,"planeBounds":{"left":0.011187010954616621,"bottom":-0.14084507042253522,"right":0.41181298904538344,"top":0.78560250391236308},"atlasBounds":{"left":871.5,"bottom":875.5,"right":935.5,"top":1023.5}},{"unicode":124,"advance":0.252,"planeBounds":{"left":-0.022402375871389928,"bottom":-0.17840375586854459,"right":0.30936601223502636,"top":0.83568075117370899},"atlasBounds":{"left":372.5,"bottom":861.5,"right":425.5,"top":1023.5}},{"unicode":125,"advance":0.32000000000000001,"planeBounds":{"left":-0.060812989045383382,"bottom":-0.14084507042253522,"right":0.33981298904538343,"top":0.78560250391236308},"atlasBounds":{"left":806.5,"bottom":875.5,"right":870.5,"top":1023.5}},{"unicode":126,"advance":0.53100000000000003,"planeBounds":{"left":0.037582728695404806,"bottom":0.25352112676056338,"right":0.55714454403186797,"top":0.460093896713615},"atlasBounds":{"left":449.5,"bottom":48.5,"right":532.5,"top":81.5}}],"kerning":[]}
diff --git a/app/public/splash-title/instrument-serif-atlas.png b/app/public/splash-title/instrument-serif-atlas.png
new file mode 100644
index 0000000..fb99728
Binary files /dev/null and b/app/public/splash-title/instrument-serif-atlas.png differ
diff --git a/app/src/App.vue b/app/src/App.vue
index e0ad9a4..136fd3f 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <main class="container">
+    <main :class="['container', { 'fonts-loaded': fontsLoaded }]">
         <router-view :manifest="manifest" :key="route.fullPath" />
     </main>
 </template>
@@ -7,18 +7,43 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
+import loadFonts from '@/libs/loadFonts'
 
 const route = useRoute()
 
 const manifest = ref([])
+const fontsLoaded = ref(false)
 
 onMounted(async () => {
     manifest.value = await fetch('/manifest.json').then((r) => r.json())
+    await loadFonts([
+        {
+            name: 'Instrument Serif',
+            styles: ['italic'],
+            weights: [400]
+        },
+        {
+            name: 'Hanken Grotesk',
+            styles: ['normal', 'italic'],
+            weights: [400, 600]
+      },
+      {
+          name: 'Iosevka Charon Mono',
+          styles: ['normal'],
+          weights: [700]
+      },
+    ])
+    fontsLoaded.value = true
 })
 </script>
 
 <style lang="scss">
 .container {
     background: var(--theme-layout);
+    transition: opacity 600ms ease-out;
+
+    &:not(.fonts-loaded) {
+        opacity: 0;
+    }
 }
 </style>
diff --git a/app/src/components/SplashTitle.vue b/app/src/components/SplashTitle.vue
new file mode 100644
index 0000000..eb1b2ce
--- /dev/null
+++ b/app/src/components/SplashTitle.vue
@@ -0,0 +1,280 @@
+<template>
+    <!-- Full-screen background plane for metaball visibility -->
+    <TresMesh ref="bgPlane" :position="[0, 0, -0.1]">
+        <TresPlaneGeometry :args="[10, 10]" />
+        <TresShaderMaterial v-bind="bgMaterialProps" />
+    </TresMesh>
+
+    <!-- Text mesh -->
+    <TresMesh ref="textMesh">
+        <TresBufferGeometry :ref="(el) => el && updateGeometry(el)" />
+        <TresShaderMaterial v-bind="materialProps" />
+    </TresMesh>
+</template>
+
+<script setup>
+import vertShader from '@/libs/glsl/splash-title/vert.glsl'
+import fragShader from '@/libs/glsl/splash-title/frag.glsl'
+import useSmoothMouse from '@/composables/useSmoothMouse'
+import { useWindowSize } from '@vueuse/core'
+import { useLoop } from '@tresjs/core'
+import { shallowRef, onMounted, ref, watch } from 'vue'
+import { TextureLoader, LinearFilter, BufferAttribute } from 'three'
+
+// Props
+const props = defineProps({
+    text: {
+        type: String,
+        default: 'Braindrops'
+    },
+    fontFamily: {
+        type: String,
+        default: 'instrument-serif'
+    },
+    fontSize: {
+        type: Number,
+        default: 0.2 // Scale factor relative to screen width
+    },
+    letterSpacing: {
+        type: Number,
+        default: 0 // Additional spacing in em units (can be negative)
+    },
+    blobStrength: {
+        type: Number,
+        default: 1.0 // Controls metaball merge distance (higher = merges from farther away)
+    }
+})
+
+const { width, height } = useWindowSize()
+const textMesh = shallowRef()
+const bgPlane = shallowRef()
+const atlasData = ref(null)
+const atlasTexture = shallowRef(null)
+
+// Load MSDF atlas
+onMounted(async () => {
+    const [jsonData, texture] = await Promise.all([
+        fetch(`/splash-title/${props.fontFamily}-atlas.json`).then(r => r.json()),
+        new TextureLoader().loadAsync(`/splash-title/${props.fontFamily}-atlas.png`)
+    ])
+
+    console.log(jsonData, texture)
+
+    atlasData.value = jsonData
+    atlasTexture.value = texture
+    texture.minFilter = LinearFilter
+    texture.magFilter = LinearFilter
+    texture.needsUpdate = true
+
+    // Trigger geometry update
+    if (textMesh.value) {
+        updateGeometry(textMesh.value.geometry)
+    }
+})
+
+// Watch for props changes and update geometry
+watch(() => [props.text, props.fontFamily, props.fontSize, props.letterSpacing], () => {
+    if (textMesh.value && atlasData.value) {
+        updateGeometry(textMesh.value.geometry)
+    }
+})
+
+// Watch for window size changes and update geometry
+watch([width, height], () => {
+    if (textMesh.value && atlasData.value) {
+        updateGeometry(textMesh.value.geometry)
+    }
+})
+
+// Create text layout and geometry
+function layoutText(text, fontData) {
+    const glyphMap = new Map()
+    fontData.glyphs.forEach(g => {
+        glyphMap.set(g.unicode, g)
+    })
+
+    const positions = []
+    const uvs = []
+    const indices = []
+
+    // First pass: measure total width including letter spacing
+    let totalWidth = 0
+    const chars = text.split('')
+    chars.forEach((char, i) => {
+        const code = char.charCodeAt(0)
+        const glyph = glyphMap.get(code)
+        if (glyph) {
+            totalWidth += glyph.advance
+            // Add letter spacing between characters (but not after the last one)
+            if (i < chars.length - 1) {
+                totalWidth += props.letterSpacing
+            }
+        }
+    })
+
+    // Calculate scale to fit within desired width (responsive to screen aspect)
+    const aspect = width.value / height.value
+    const targetWidth = props.fontSize * 2 * aspect // Convert to normalized coordinates
+    const scale = totalWidth > 0 ? targetWidth / totalWidth : 1
+
+    const atlasW = fontData.atlas.width
+    const atlasH = fontData.atlas.height
+
+    let cursorX = 0
+    let vertexCount = 0
+
+    chars.forEach((char, i) => {
+        const code = char.charCodeAt(0)
+        const glyph = glyphMap.get(code)
+
+        if (!glyph || !glyph.planeBounds) {
+            cursorX += (glyph?.advance || 0) * scale
+            // Add letter spacing
+            if (i < chars.length - 1) {
+                cursorX += props.letterSpacing * scale
+            }
+            return
+        }
+
+        const pb = glyph.planeBounds
+        const ab = glyph.atlasBounds
+
+        // Quad corners in plane space (scaled)
+        const x0 = cursorX + pb.left * scale
+        const y0 = pb.bottom * scale
+        const x1 = cursorX + pb.right * scale
+        const y1 = pb.top * scale
+
+        // UV coordinates (atlas space, Y flipped for WebGL)
+        const u0 = ab.left / atlasW
+        const v0 = 1.0 - ab.top / atlasH
+        const u1 = ab.right / atlasW
+        const v1 = 1.0 - ab.bottom / atlasH
+
+        // Vertex index offset for this quad
+        const vIdx = vertexCount
+        vertexCount += 4
+
+        // Four vertices (bottom-left, bottom-right, top-right, top-left)
+        positions.push(
+            x0, y0, 0,
+            x1, y0, 0,
+            x1, y1, 0,
+            x0, y1, 0
+        )
+
+        uvs.push(
+            u0, v1,
+            u1, v1,
+            u1, v0,
+            u0, v0
+        )
+
+        // Two triangles
+        indices.push(
+            vIdx, vIdx + 1, vIdx + 2,
+            vIdx, vIdx + 2, vIdx + 3
+        )
+
+        // Advance cursor by glyph width plus letter spacing
+        cursorX += glyph.advance * scale
+        if (i < chars.length - 1) {
+            cursorX += props.letterSpacing * scale
+        }
+    })
+
+    // Center the text
+    const actualWidth = cursorX
+    const offsetX = -actualWidth / 2
+    for (let i = 0; i < positions.length; i += 3) {
+        positions[i] += offsetX
+    }
+
+    return { positions, uvs, indices, scale }
+}
+
+// Update geometry when atlas is loaded
+function updateGeometry(geometry) {
+    if (!atlasData.value) return
+
+    const { positions, uvs, indices, scale } = layoutText(props.text, atlasData.value)
+
+    geometry.setAttribute('position', new BufferAttribute(new Float32Array(positions), 3))
+    geometry.setAttribute('uv', new BufferAttribute(new Float32Array(uvs), 2))
+    geometry.setIndex(indices)
+    geometry.computeBoundingBox()
+    geometry.computeBoundingSphere()
+
+    // Update uniforms with current scale for MSDF quality
+    if (textMesh.value?.material) {
+        textMesh.value.material.uniforms.u_text_scale.value = scale
+    }
+}
+
+useSmoothMouse({
+    normalize: true,
+    onUpdate: ({ sx, sy }) => {
+        const mousePos = [sx, 1 - sy]
+        if (textMesh.value?.material) {
+            textMesh.value.material.uniforms.u_mouse.value = mousePos
+        }
+        if (bgPlane.value?.material) {
+            bgPlane.value.material.uniforms.u_mouse.value = mousePos
+        }
+    },
+})
+
+const materialProps = {
+    vertexShader: vertShader,
+    fragmentShader: fragShader,
+    transparent: true,
+    depthWrite: false,
+    uniforms: {
+        u_resolution: { value: [width.value, height.value] },
+        u_mouse: { value: [0.5, 0.5] },
+        u_msdf: { value: atlasTexture.value },
+        u_atlas_size: { value: [212, 212] },
+        u_text_scale: { value: 1.0 },
+        u_distance_range: { value: 2.0 }, // From atlas distanceRange
+        u_is_text: { value: 1.0 }, // Flag to indicate this is text
+        u_blob_strength: { value: props.blobStrength },
+    },
+}
+
+const bgMaterialProps = {
+    vertexShader: vertShader,
+    fragmentShader: fragShader,
+    transparent: true,
+    depthWrite: false,
+    uniforms: {
+        u_resolution: { value: [width.value, height.value] },
+        u_mouse: { value: [0.5, 0.5] },
+        u_msdf: { value: atlasTexture.value },
+        u_atlas_size: { value: [212, 212] },
+        u_text_scale: { value: 1.0 },
+        u_distance_range: { value: 2.0 },
+        u_is_text: { value: 0.0 }, // Background only shows metaball
+        u_blob_strength: { value: props.blobStrength },
+    },
+}
+
+const { onRender } = useLoop()
+onRender(() => {
+    const resolution = [width.value, height.value]
+
+    if (textMesh.value?.material) {
+        textMesh.value.material.uniforms.u_resolution.value = resolution
+        textMesh.value.material.uniforms.u_blob_strength.value = props.blobStrength
+
+        // Update atlas texture reference if it changed
+        if (atlasTexture.value && textMesh.value.material.uniforms.u_msdf.value !== atlasTexture.value) {
+            textMesh.value.material.uniforms.u_msdf.value = atlasTexture.value
+        }
+    }
+
+    if (bgPlane.value?.material) {
+        bgPlane.value.material.uniforms.u_resolution.value = resolution
+        bgPlane.value.material.uniforms.u_blob_strength.value = props.blobStrength
+    }
+})
+</script>
diff --git a/app/src/components/WebglCanvas.vue b/app/src/components/WebglCanvas.vue
new file mode 100644
index 0000000..2abdc49
--- /dev/null
+++ b/app/src/components/WebglCanvas.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="webgl-canvas">
+        <TresCanvas
+            v-bind="{
+                powerPreference: 'high-performance',
+                alpha: true,
+                clearAlpha: 0,
+                ...options,
+            }"
+        >
+            <!-- <TresOrthographicCamera
+                :args="[0, 1, 0, 1, 0.001, 5000]"
+                :position="[0, 0, -1000]"
+                :look-at="[0, 0, 0]"
+            /> -->
+            <TresOrthographicCamera
+                :args="[1 / -2, 1 / 2, 1 / 2, 1 / -2, 0.001, 5000]"
+                :position="[0, 0, 1000]"
+            />
+
+            <TresAmbientLight />
+            <TresPointLight />
+
+            <OrbitControls v-if="controls" />
+
+            <slot />
+        </TresCanvas>
+    </div>
+</template>
+
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+
+const { controls, perspective } = defineProps({
+    options: Object,
+    controls: Boolean
+})
+</script>
+
+<style lang="scss">
+.webgl-canvas {
+    position: absolute;
+    inset: 0;
+
+    &:not(.controls) {
+        pointer-events: none;
+
+        .sticky canvas {
+            pointer-events: none !important;
+        }
+    }
+}
+</style>
diff --git a/app/src/composables/useSmoothMouse.js b/app/src/composables/useSmoothMouse.js
new file mode 100644
index 0000000..6a6606e
--- /dev/null
+++ b/app/src/composables/useSmoothMouse.js
@@ -0,0 +1,89 @@
+import gsap from 'gsap'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useWindowSize, useEventListener } from '@vueuse/core'
+
+/**
+ * Shared global raw mouse state (only set up once)
+ */
+const rawMouse = {
+    x: ref(0),
+    y: ref(0),
+    initialized: false,
+    cleanup: null,
+}
+
+const useGlobalMouseListener = () => {
+    if (!rawMouse.initialized && !import.meta.env.SSR) {
+        rawMouse.initialized = true
+        rawMouse.cleanup = useEventListener(window, 'mousemove', (e) => {
+            rawMouse.x.value = e.clientX
+            rawMouse.y.value = e.clientY
+        })
+    }
+}
+
+/**
+ * Composable for smoothed mouse position with customizable smoothing and normalization.
+ */
+export default (options) => {
+    const smoothFactor = options?.smoothFactor ?? 0.1
+    const normalize = options?.normalize ?? false
+    const callback = options?.onUpdate
+
+    const { width: wWidth, height: wHeight } = useWindowSize()
+
+    const sx = ref(0)
+    const sy = ref(0)
+
+    useGlobalMouseListener()
+
+    const getTargetX = () =>
+        normalize ? rawMouse.x.value / wWidth.value : rawMouse.x.value
+    const getTargetY = () =>
+        normalize ? rawMouse.y.value / wHeight.value : rawMouse.y.value
+
+    let tween
+    onMounted(() => {
+        if (tween) tween.kill
+
+        // Start smoothing tween
+        tween = gsap.to(
+            { x: sx.value, y: sy.value },
+            {
+                duration: 1,
+                ease: 'linear',
+                repeat: -1,
+                onUpdate: () => {
+                    const newX = gsap.utils.interpolate(
+                        sx.value,
+                        getTargetX(),
+                        smoothFactor,
+                    )
+                    const newY = gsap.utils.interpolate(
+                        sy.value,
+                        getTargetY(),
+                        smoothFactor,
+                    )
+
+                    sx.value = newX
+                    sy.value = newY
+
+                    callback?.({ sx: sx.value, sy: sy.value })
+                },
+            },
+        )
+    })
+
+    onBeforeUnmount(() => {
+        tween?.kill()
+        rawMouse.cleanup()
+        rawMouse.initialized = false
+    })
+
+    return {
+        sx,
+        sy,
+        rawX: rawMouse.x,
+        rawY: rawMouse.y,
+    }
+}
diff --git a/app/src/libs/glsl/splash-title/frag.glsl b/app/src/libs/glsl/splash-title/frag.glsl
new file mode 100644
index 0000000..47614c1
--- /dev/null
+++ b/app/src/libs/glsl/splash-title/frag.glsl
@@ -0,0 +1,57 @@
+precision highp float;
+
+varying vec2 v_uv;
+varying vec2 v_screen_uv;
+
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform sampler2D u_msdf;
+uniform vec2 u_atlas_size;
+uniform float u_text_scale;
+uniform float u_distance_range;
+uniform float u_is_text;
+uniform float u_blob_strength;
+
+// MSDF median function - extracts signed distance from multi-channel texture
+float median(float r, float g, float b) {
+    return max(min(r, g), min(max(r, g), b));
+}
+
+void main() {
+    float aspect = u_resolution.x / u_resolution.y;
+
+    float tf = 0.0;
+
+    if (u_is_text > 0.5) {
+        // Sample MSDF atlas - v_uv already contains the correct atlas coordinates
+        vec3 msdfSample = texture2D(u_msdf, vec2(v_uv.x, 1. - v_uv.y)).rgb;
+        float msdf = median(msdfSample.r, msdfSample.g, msdfSample.b);
+
+        // Proper MSDF distance field scaling for high quality rendering
+        // Calculate screen-space derivatives to determine proper threshold
+        vec2 unitRange = u_distance_range / u_atlas_size;
+        vec2 screenTexSize = vec2(1.0) / fwidth(v_uv);
+        float screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);
+        float screenPxDistance = screenPxRange * (msdf - 0.5);
+
+        // Convert MSDF distance to a field value centered at 0.5
+        // This creates a smooth falloff around the glyph edge
+        tf = screenPxDistance / screenPxRange + 0.5;
+    }
+
+    // Mouse blob: smooth circular falloff in screen space, aspect-corrected
+    float blobRadius = 0.05;
+    vec2 d = (v_screen_uv - u_mouse) * vec2(aspect, 1.0);
+    float bf = 1.0 - smoothstep(0.0, blobRadius, length(d));
+
+    // Metaball field sum: scale blob contribution to control merge distance
+    // Higher u_blob_strength = blob merges from farther away
+    // Lower u_blob_strength = blob must get closer to merge
+    float field = tf + (bf * u_blob_strength);
+
+    // Anti-aliased edge at the 0.5 isosurface
+    float fw = fwidth(field);
+    float alpha = smoothstep(0.5 - fw, 0.5 + fw, field);
+
+    gl_FragColor = vec4(0.0, 0.0, 0.0, alpha);
+}
diff --git a/app/src/libs/glsl/splash-title/vert.glsl b/app/src/libs/glsl/splash-title/vert.glsl
new file mode 100644
index 0000000..d5213fc
--- /dev/null
+++ b/app/src/libs/glsl/splash-title/vert.glsl
@@ -0,0 +1,12 @@
+varying vec2 v_uv;
+varying vec2 v_screen_uv;
+
+void main() {
+    v_uv = uv;
+    
+    // Compute screen-space UV for mouse interaction
+    vec4 clipPos = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    v_screen_uv = clipPos.xy / clipPos.w * 0.5 + 0.5;
+
+    gl_Position = clipPos;
+}
diff --git a/app/src/libs/loadFonts.js b/app/src/libs/loadFonts.js
new file mode 100644
index 0000000..0e7d834
--- /dev/null
+++ b/app/src/libs/loadFonts.js
@@ -0,0 +1,50 @@
+import _uniq from 'lodash/uniq'
+import FontFaceObserver from 'fontfaceobserver'
+
+const resolveWeights = (font) => {
+    const declared = font.weights || []
+    const single = font.weight ? [font.weight] : []
+    const all = _uniq(declared.concat(single))
+    return all.length ? all : [400]
+}
+const resolveStyles = (font) => {
+    const declared = font.styles || []
+    const single = font.style ? [font.style] : []
+    const all = _uniq(declared.concat(single))
+    return all.length ? all : ['normal']
+}
+
+// Primary load function
+export default (ops) => {
+    const fonts = Array.isArray(ops) ? ops : [ops]
+    const families = []
+
+    // declare all fonts
+    fonts.forEach((font) => {
+        // resolve weights & styles
+        const weights = resolveWeights(font)
+        const styles = resolveStyles(font)
+
+        // split all into separate declarations
+        weights.forEach((weight) => {
+            styles.forEach((style) => {
+                families.push({
+                    name: font.name,
+                    weight,
+                    style,
+                })
+            })
+        })
+    })
+
+    // Load all in parallel
+    return Promise.all(
+        families.map((fam) => {
+            const font = new FontFaceObserver(fam.name, {
+                weight: fam.weight,
+                style: fam.style,
+            })
+            return font.load()
+        }),
+    )
+}
diff --git a/app/src/pages/index.vue b/app/src/pages/index.vue
index a5d3dee..f39fa54 100644
--- a/app/src/pages/index.vue
+++ b/app/src/pages/index.vue
@@ -1,20 +1,40 @@
 <template>
 	<main class="home theme-light">
-        <h1>Braindrops</h1>
-        <btn @click="onClick">View Drops</btn>
+	    <webgl-canvas>
+		    <splash-title
+				v-if="ready"
+				fontFamily="instrument-serif"
+				:letterSpacing="-0.05"
+				:blobStrength="1"
+			/>
+		</webgl-canvas>
+
+		<div class="content">
+    		<h1>Braindrops</h1>
+            <btn @click="onClick">View Drops</btn>
+		</div>
 	</main>
 </template>
 
 <script setup>
-import Btn from '@shared/Btn.vue'
+import SplashTitle from '@/components/SplashTitle.vue'
+import WebglCanvas from '@/components/WebglCanvas.vue'
 import { useRouter } from 'vue-router';
+import Btn from '@shared/Btn.vue'
+import { ref } from 'vue';
 
 const props = defineProps({
     manifest: Array,
 })
 
+const ready = ref(false)
+
 const router = useRouter()
 
+document.fonts.ready.then(() => {
+    ready.value = true
+})
+
 const onClick = () => {
     router.push(`/${props.manifest[0]}`)
 }
@@ -27,10 +47,21 @@ const onClick = () => {
     height: 100vh;
     padding-top: rs(20px);
     padding-bottom: rs(20px);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: rs(20px)
+
+
+    .content {
+        height: 100vh;
+        position: relative;
+        z-index: 5;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: rs(20px);
+
+        h1 {
+            opacity: 0;
+        }
+    }
 }
 </style>
diff --git a/app/src/styles/main.scss b/app/src/styles/main.scss
index e69de29..e7fc431 100644
--- a/app/src/styles/main.scss
+++ b/app/src/styles/main.scss
@@ -0,0 +1,3 @@
+.webgl-canvas {
+    z-index: 0;
+}
diff --git a/app/vite.config.js b/app/vite.config.js
index 36ef11e..77ee071 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -1,10 +1,11 @@
 import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
+import { defineConfig, mergeConfig } from 'vite'
 import sharedConfig from '../shared/vite.config.js'
 import fs from 'node:fs'
 import path from 'node:path'
+import glsl from 'vite-plugin-glsl'
 
-export default defineConfig({
+export default defineConfig(mergeConfig(sharedConfig, {
   ...sharedConfig,
   resolve: {
       alias: {
@@ -13,7 +14,7 @@ export default defineConfig({
       },
   },
   plugins: [
-      ...sharedConfig.plugins,
+      glsl(),
       {
           name: 'serve-drops',
           configureServer(server) {
@@ -62,4 +63,4 @@ export default defineConfig({
           },
       },
   ],
-})
+}))
diff --git a/font-ttf/HankenGrotesk-Italic.ttf b/font-ttf/HankenGrotesk-Italic.ttf
new file mode 100644
index 0000000..fb0b658
Binary files /dev/null and b/font-ttf/HankenGrotesk-Italic.ttf differ
diff --git a/font-ttf/HankenGrotesk-Regular.ttf b/font-ttf/HankenGrotesk-Regular.ttf
new file mode 100644
index 0000000..6dc3655
Binary files /dev/null and b/font-ttf/HankenGrotesk-Regular.ttf differ
diff --git a/font-ttf/HankenGrotesk-SemiBold.ttf b/font-ttf/HankenGrotesk-SemiBold.ttf
new file mode 100644
index 0000000..06b15fe
Binary files /dev/null and b/font-ttf/HankenGrotesk-SemiBold.ttf differ
diff --git a/font-ttf/InstrumentSerif-Italic.ttf b/font-ttf/InstrumentSerif-Italic.ttf
new file mode 100644
index 0000000..8fa958d
Binary files /dev/null and b/font-ttf/InstrumentSerif-Italic.ttf differ
diff --git a/font-ttf/IosevkaCharonMono-Bold.ttf b/font-ttf/IosevkaCharonMono-Bold.ttf
new file mode 100644
index 0000000..f65faf0
Binary files /dev/null and b/font-ttf/IosevkaCharonMono-Bold.ttf differ
diff --git a/package-lock.json b/package-lock.json
index f2ffb44..d92cd2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,12 +18,18 @@
             "name": "braindrops-app",
             "version": "0.0.0",
             "dependencies": {
+                "@mapbox/tiny-sdf": "^2.2.0",
                 "@tiptap/pm": "^3.28.0",
                 "@tiptap/starter-kit": "^3.28.0",
                 "@tiptap/vue-3": "^3.28.0",
+                "@tresjs/cientos": "^5.8.1",
+                "@tresjs/core": "^5.8.3",
                 "fecha": "^4.2.3",
+                "fontfaceobserver": "^2.3.0",
+                "lodash": "^4.18.1",
                 "sass": "^1.98.0",
                 "sass-embedded": "^1.98.0",
+                "vite-plugin-glsl": "^1.6.0",
                 "vue": "^3.5.30",
                 "vue-router": "^5.2.0"
             },
@@ -114,19 +120,6 @@
                 "vite": "^8.0.0"
             }
         },
-        "drops/testing": {
-            "version": "0.0.0",
-            "dependencies": {
-                "@fuzzco/font-loader": "^1.0.2",
-                "sass": "^1.98.0",
-                "sass-embedded": "^1.98.0",
-                "vue": "^3.5.30"
-            },
-            "devDependencies": {
-                "@vitejs/plugin-vue": "^6.0.5",
-                "vite": "^8.0.0"
-            }
-        },
         "node_modules/@babel/generator": {
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-8.0.0.tgz",
@@ -361,6 +354,12 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@mapbox/tiny-sdf": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.2.0.tgz",
+            "integrity": "sha512-LVL4wgI9YAum5V+LNVQO6QgFBPw7/MIIY4XJPNsPDMrjEwcE+JfKk1LuIl8GnF197ejVdC9QdPaxrx5gfgdGXg==",
+            "license": "BSD-2-Clause"
+        },
         "node_modules/@napi-rs/wasm-runtime": {
             "version": "1.1.6",
             "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
@@ -2324,6 +2323,12 @@
                 "url": "https://github.com/sponsors/antfu"
             }
         },
+        "node_modules/lodash": {
+            "version": "4.18.1",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+            "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+            "license": "MIT"
+        },
         "node_modules/magic-string": {
             "version": "0.30.21",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -3232,10 +3237,6 @@
                 "node": ">=16.0.0"
             }
         },
-        "node_modules/testing": {
-            "resolved": "drops/testing",
-            "link": true
-        },
         "node_modules/three": {
             "version": "0.185.1",
             "resolved": "https://registry.npmjs.org/three/-/three-0.185.1.tgz",