src/client/pages/welcome.timeline.vue

@@ -38,6 +38,7 @@ export default defineComponent({
 	data() {
 		return {
 			notes: [],
+			isScrolling: false,
 		}
 	},
 
@@ -45,14 +46,40 @@ export default defineComponent({
 		os.api('notes/featured').then(notes => {
 			this.notes = notes;
 		});
+	},
+
+	updated() {
+		if (this.$refs.scroll.clientHeight > window.innerHeight) {
+			this.isScrolling = true;
+		}
 	}
 });
 </script>
 
 <style lang="scss" scoped>
+@keyframes scroll {
+	0% {
+		transform: translate3d(0, 0, 0);
+	}
+	5% {
+		transform: translate3d(0, 0, 0);
+	}
+	75% {
+		transform: translate3d(0, calc(-100% + 90vh), 0);
+	}
+	90% {
+		transform: translate3d(0, calc(-100% + 90vh), 0);
+	}
+}
+
 .civpbkhh {
 	text-align: right;
 
+	> .scrollbox {
+		&.scroll {
+			animation: scroll 45s linear infinite;
+		}
+
 		> .note {
 			margin: 16px 0 16px auto;
 
@@ -61,10 +88,12 @@ export default defineComponent({
 				margin: 0 0 0 auto;
 				max-width: max-content;
 				border-radius: 16px;
+
 				> .richcontent {
 					min-width: 250px;
 				}
 			}
 		}
+	}
 }
 </style>