feat: Transitions, spacing, scroll fade, prompt area update (#11168)

Co-authored-by: Github Action <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: aaroniker <[email protected]>

1 files changed, 52 insertions, 0 deletions

diff --git a/packages/ui/src/components/cycle-label.css b/packages/ui/src/components/cycle-label.css
new file mode 100644
index 000000000..46a6408f0
--- /dev/null
+++ b/packages/ui/src/components/cycle-label.css
@@ -0,0 +1,52 @@
+.cycle-label {
+	--c-dur: 200ms;
+	--c-stag: 30ms;
+	--c-ease: cubic-bezier(0.25, 0, 0.5, 1);
+	--c-opacity-start: 0;
+	--c-opacity-end: 1;
+	--c-blur-start: 0px;
+	--c-blur-end: 0px;
+	--c-skew: 10deg;
+
+	display: inline-flex;
+	position: relative;
+
+	transform-style: preserve-3d;
+	perspective: 500px;
+	transition: width 200ms var(--c-ease);
+	will-change: width;
+	overflow: hidden;
+
+	.cycle-char {
+		display: inline-block;
+		transform-style: preserve-3d;
+		min-width: 0.25em;
+		backface-visibility: hidden;
+
+		transition:
+			transform var(--c-dur) var(--c-ease),
+			opacity var(--c-dur) var(--c-ease),
+			filter var(--c-dur) var(--c-ease);
+		transition-delay: calc(var(--i, 0) * var(--c-stag));
+
+		&.enter {
+			opacity: var(--c-opacity-end);
+			filter: blur(var(--c-blur-end));
+			transform: translateY(0) rotateX(0) skewX(0);
+		}
+
+		&.exit {
+			opacity: var(--c-opacity-start);
+			filter: blur(var(--c-blur-start));
+			transform: translateY(50%) rotateX(90deg) skewX(var(--c-skew));
+		}
+
+		&.pre {
+			opacity: var(--c-opacity-start);
+			filter: blur(var(--c-blur-start));
+			transition: none;
+			transform: translateY(-50%) rotateX(-90deg)
+				skewX(calc(var(--c-skew) * -1));
+		}
+	}
+}