diff --git a/public_html/img/experiments/lf-anim.gif b/public_html/img/experiments/lf-anim.gif new file mode 100644 index 0000000..14d827a Binary files /dev/null and b/public_html/img/experiments/lf-anim.gif differ diff --git a/public_html/img/experiments/lf-poster.webp b/public_html/img/experiments/lf-poster.webp new file mode 100644 index 0000000..f5fd7dd Binary files /dev/null and b/public_html/img/experiments/lf-poster.webp differ diff --git a/public_html/img/experiments/watchface-echocentric.webp b/public_html/img/experiments/watchface-echocentric.webp new file mode 100644 index 0000000..4212bb2 Binary files /dev/null and b/public_html/img/experiments/watchface-echocentric.webp differ diff --git a/public_html/img/experiments/watchface-filmplakat.webp b/public_html/img/experiments/watchface-filmplakat.webp new file mode 100644 index 0000000..faf43f8 Binary files /dev/null and b/public_html/img/experiments/watchface-filmplakat.webp differ diff --git a/public_html/img/experiments/watchface-frosted.webp b/public_html/img/experiments/watchface-frosted.webp new file mode 100644 index 0000000..d65b6fc Binary files /dev/null and b/public_html/img/experiments/watchface-frosted.webp differ diff --git a/public_html/img/experiments/watchface-squared40.webp b/public_html/img/experiments/watchface-squared40.webp new file mode 100644 index 0000000..57cf37c Binary files /dev/null and b/public_html/img/experiments/watchface-squared40.webp differ diff --git a/public_html/img/head-experiment.webp b/public_html/img/head-experiment.webp new file mode 100644 index 0000000..df2e67d Binary files /dev/null and b/public_html/img/head-experiment.webp differ diff --git a/public_html/img/head-experiment_1x.webp b/public_html/img/head-experiment_1x.webp new file mode 100644 index 0000000..6b389c8 Binary files /dev/null and b/public_html/img/head-experiment_1x.webp differ diff --git a/public_html/img/play-btn.svg b/public_html/img/play-btn.svg new file mode 100644 index 0000000..3b27965 --- /dev/null +++ b/public_html/img/play-btn.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public_html/index.html b/public_html/index.html index 35257d1..3e07268 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -9,7 +9,7 @@ - + @@ -124,7 +124,50 @@ + +
+
+

from the lab + +

+
+
+
+

watchfaces for smartwatches

+ squared 4.0 watchface on the pebble time round + echocentric clockface on the fitbit ionic + filmplakat watchface on the original pebble + frosted watchface for fitbit smartwatches +

ever since the original pebble came out in 2013 I've been in love with the idea of creating my own watchfaces. over the years I have programmed serveral watchfaces for the various pebble smartwatch models as well as fitbit smartwatches.

+
+
+

3d animation for “lastfuture”

+
+
+ LF 3d animation poster-frame + LF 3d animation +
+

a specific animation style I had in mind for my music persona lastfuture required objects with transparent flat faces, integer snapping, controlled image noise and visual artefacts. to solve this I wrote the tiny 3d engine “3d simple” that can create this animation style then render it out as a gif.

+
+
+
+ + + diff --git a/public_html/style.css b/public_html/style.css index 8a3421b..4fe3b2c 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -380,8 +380,8 @@ p { --font-system: 'Source Sans Pro', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */ --text-color: #000; - --link-color: #03f; - --link-color-hover: #69f; + --link-color: #3b7885; + --link-color-hover: #63a8b8; --button-color: #63a8b8; --button-color-hover: #333; --highlight-color: #a3d5d5; @@ -463,7 +463,7 @@ body { } a { - text-decoration: none; + text-decoration: underline; transition: all 0.2s ease-in-out; } @@ -489,6 +489,14 @@ a { margin: 1.5rem; } +.whitebg { + color: var(--text-color); +} + +.nowrap { + white-space: nowrap; +} + /* Mobile layout (default) - Elements stacked in desired order */ #greeting { width: 100%; @@ -505,9 +513,14 @@ a { order: 3; } +#experiments { + width: 100%; + order: 3; +} + #findme { width: 100%; - order: 4; + order: 99; } /* sidebar */ @@ -524,6 +537,7 @@ a { .sidebaritem a { color: white; display: block; + text-decoration: none; } .sidebaritem a, @@ -634,14 +648,10 @@ a { /* content */ .contentitem { - width: 495px; color: white; font-size: 1.125rem; font-style: italic; font-weight: 300; -} - -.contentitem { width: 100%; margin: 0 0 3rem 0; } @@ -675,10 +685,19 @@ section.invertedbox h2 em { padding: 1.25rem; } +.contentitem div.opaque article { + margin-bottom: 1.5rem; +} + .contentitem div.opaque h2 { - font-size: 1.6rem; + font-size: 1.3rem; font-weight: 300; margin-bottom: 1rem; + width: 100%; + position: relative; +} +.contentitem div.opaque h2 em { + font-weight: 500; } .contentitem div.opaque h2 span.halfbubble { @@ -687,7 +706,7 @@ section.invertedbox h2 em { border-bottom-right-radius: 11px; border-top-right-radius: 11px; display: inline-block; - margin: 0 0.7rem -0.125rem -1.25rem; + margin: 0 0.7rem -0.25rem -1.25rem; } .contentitem header .icon { @@ -696,10 +715,53 @@ section.invertedbox h2 em { margin-top: -1rem; } -.contentitem#experiment header .icon { +.contentitem#experiments header .icon { margin-top: -2.5rem; } +.paused-animation { + position: relative; + margin: 0.5em 0; + /* height: 7rem; */ + cursor: pointer; +} +.paused-animation .play-btn { + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(99,150,180,0.2); + background-image: url('img/play-btn.svg'); + background-position: center center; + background-repeat: no-repeat; + background-size: 4rem; + box-shadow: 0px 0px 6px rgba(0,0,0,0.3); +} +.paused-animation img { + display: block; + width: auto; + height: 100%; + margin: 0; +} +.paused-animation .anim { + display: none; +} +.paused-animation.active { + height: auto; +} +.paused-animation.active .poster-frame, .paused-animation.active .play-btn { + display: none; +} +.paused-animation.active .anim { + display: block; +} +.watchface { + width: calc( ( 100% / 2 ) - 0.6rem ); + margin: 0.325rem 0.3rem; + height: auto; + display: block; + float: left; +} + /* music */ article.album { @@ -836,8 +898,11 @@ article.album a:hover { } /* Right column */ - #music { + + .contentitem { max-width: 495px; + } + #music { flex: 1; order: 2; } @@ -866,16 +931,16 @@ article.album a:hover { height: 160px; } - .contentitem#music { + .contentitem { max-width: 500px; min-width: 340px; margin-top: 3rem; } - + .sidebaritem { margin-left: calc( ( 100% - 210px ) / 2 ); } - + .sidebaritem#greeting #icosahedron-container { margin-left: 3.5rem; margin-top: 1.5rem; @@ -884,16 +949,16 @@ article.album a:hover { .sidebaritem#greeting .line1 { margin-left: 4rem; } - + .sidebaritem#iam { padding-left: 0.75rem; margin-top: 1.75rem; } - + .sidebaritem#iam .line2 { padding-left: 0.25rem; } - + .sidebaritem#iam .line3 { padding-left: 0.25rem; } @@ -903,7 +968,7 @@ article.album a:hover { margin-bottom: 2rem; padding-left: 1rem; } - + .sidebaritem#findme .line2, .sidebaritem#findme .line3 { margin-top: 0.2em; } diff --git a/src/lastfuture_-_dreamshifter.jpg b/src/albums/lastfuture_-_dreamshifter.jpg similarity index 100% rename from src/lastfuture_-_dreamshifter.jpg rename to src/albums/lastfuture_-_dreamshifter.jpg diff --git a/src/lastfuture_-_misinterpreter.jpg b/src/albums/lastfuture_-_misinterpreter.jpg similarity index 100% rename from src/lastfuture_-_misinterpreter.jpg rename to src/albums/lastfuture_-_misinterpreter.jpg diff --git a/src/lastfuture_-_reverse_kill.jpg b/src/albums/lastfuture_-_reverse_kill.jpg similarity index 100% rename from src/lastfuture_-_reverse_kill.jpg rename to src/albums/lastfuture_-_reverse_kill.jpg diff --git a/src/lastfuture_-_signal_to_noise.jpg b/src/albums/lastfuture_-_signal_to_noise.jpg similarity index 100% rename from src/lastfuture_-_signal_to_noise.jpg rename to src/albums/lastfuture_-_signal_to_noise.jpg diff --git a/src/experiments/Screenshot 2025-05-15 at 17-18-22 (1) Filmplakat Pebble (Animation Showcase) – Concept Code Animation Graphics - YouTube.webp b/src/experiments/Screenshot 2025-05-15 at 17-18-22 (1) Filmplakat Pebble (Animation Showcase) – Concept Code Animation Graphics - YouTube.webp new file mode 100644 index 0000000..7b05439 Binary files /dev/null and b/src/experiments/Screenshot 2025-05-15 at 17-18-22 (1) Filmplakat Pebble (Animation Showcase) – Concept Code Animation Graphics - YouTube.webp differ diff --git a/src/experiments/frosted.webp b/src/experiments/frosted.webp new file mode 100644 index 0000000..49332d1 Binary files /dev/null and b/src/experiments/frosted.webp differ diff --git a/src/experiments/promo-ptr.webp b/src/experiments/promo-ptr.webp new file mode 100644 index 0000000..81f3c61 Binary files /dev/null and b/src/experiments/promo-ptr.webp differ diff --git a/src/experiments/snapshot.jpg b/src/experiments/snapshot.jpg new file mode 100644 index 0000000..f456450 Binary files /dev/null and b/src/experiments/snapshot.jpg differ diff --git a/src/icons.afdesign b/src/icons.afdesign new file mode 100644 index 0000000..64d20c0 Binary files /dev/null and b/src/icons.afdesign differ