Skip to content

polished notepad page #1675

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ComputelessComputer merged 3 commits into from
Nov 17, 2025
Merged

polished notepad page #1675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a2178cd
feat(MockWindow): Add optional className prop for custom styling
ComputelessComputer Nov 17, 2025
67b67f3
feat(ui): Enhance line animation and opacity transitions
ComputelessComputer Nov 17, 2025
6e024e6
feat: Refactor notepad route with platform-aware CTA
ComputelessComputer Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/web/src/components/mock-window.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@ import { cn } from "@hypr/utils";
export function MockWindow({
showAudioIndicator,
variant = "desktop",
className,
children,
}: {
showAudioIndicator?: boolean;
variant?: "desktop" | "mobile";
className?: string;
children: React.ReactNode;
}) {
const isMobile = variant === "mobile";
Expand All @@ -17,6 +19,7 @@ export function MockWindow({
className={cn([
"bg-white shadow-lg border border-neutral-200 border-b-0 overflow-hidden",
isMobile ? "rounded-t-lg" : "w-full max-w-lg rounded-t-xl",
className,
])}
>
<div className="flex items-center gap-2 px-4 py-3 border-b border-neutral-200 bg-neutral-50">
Expand Down
23 changes: 16 additions & 7 deletions apps/web/src/routes/_view/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -797,7 +797,16 @@ function HowItWorksSection() {
setEnhancedLines(3);
setTimeout(() => {
setEnhancedLines(4);
setTimeout(() => runAnimation(), 1000);
setTimeout(() => {
setEnhancedLines(5);
setTimeout(() => {
setEnhancedLines(6);
setTimeout(() => {
setEnhancedLines(7);
setTimeout(() => runAnimation(), 1000);
}, 800);
}, 800);
}, 800);
}, 800);
}, 800);
}, 800);
Expand Down Expand Up @@ -876,7 +885,7 @@ function HowItWorksSection() {
<li
className={cn(
"transition-opacity duration-500",
enhancedLines >= 1 ? "opacity-100" : "opacity-0",
enhancedLines >= 2 ? "opacity-100" : "opacity-0",
)}
>
Sarah presented the new mobile UI update, which includes a
Expand All @@ -886,7 +895,7 @@ function HowItWorksSection() {
<li
className={cn([
"transition-opacity duration-500",
enhancedLines >= 2 ? "opacity-100" : "opacity-0",
enhancedLines >= 3 ? "opacity-100" : "opacity-0",
])}
>
Ben confirmed that API adjustments are needed to support
Expand All @@ -896,7 +905,7 @@ function HowItWorksSection() {
<li
className={cn([
"transition-opacity duration-500",
enhancedLines >= 3 ? "opacity-100" : "opacity-0",
enhancedLines >= 4 ? "opacity-100" : "opacity-0",
])}
>
The UI update will be implemented in phases, starting with
Expand All @@ -909,7 +918,7 @@ function HowItWorksSection() {
<h4
className={cn([
"font-semibold text-stone-700 transition-opacity duration-500",
enhancedLines >= 4 ? "opacity-100" : "opacity-0",
enhancedLines >= 5 ? "opacity-100" : "opacity-0",
])}
>
New Dashboard – Urgent Priority
Expand All @@ -918,7 +927,7 @@ function HowItWorksSection() {
<li
className={cn([
"transition-opacity duration-500",
enhancedLines >= 4 ? "opacity-100" : "opacity-0",
enhancedLines >= 6 ? "opacity-100" : "opacity-0",
])}
>
Alice emphasized that the new analytics dashboard must be
Expand All @@ -927,7 +936,7 @@ function HowItWorksSection() {
<li
className={cn([
"transition-opacity duration-500",
enhancedLines >= 5 ? "opacity-100" : "opacity-0",
enhancedLines >= 7 ? "opacity-100" : "opacity-0",
])}
>
The new dashboard will feature real-time user engagement
Expand Down
55 changes: 26 additions & 29 deletions apps/web/src/routes/_view/product/ai-notetaking.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,31 +212,27 @@ function EditorSection() {
function AudioTranscriptionDemo() {
const [progress, setProgress] = useState(0);

// Words with their position along the timeline (0 to 1)
// Positioning accounts for approximate text width to prevent overlap
const words = [
{ position: 0.02, text: "Welcome" }, // ~7 chars
{ position: 0.15, text: "to" }, // ~2 chars
{ position: 0.2, text: "today's" }, // ~7 chars
{ position: 0.33, text: "meeting" }, // ~7 chars
{ position: 0.48, text: "Let's" }, // ~5 chars
{ position: 0.59, text: "discuss" }, // ~7 chars
{ position: 0.73, text: "the" }, // ~3 chars
{ position: 0.79, text: "Q4" }, // ~2 chars
{ position: 0.86, text: "roadmap" }, // ~7 chars
{ position: 0.02, text: "Welcome" },
{ position: 0.15, text: "to" },
{ position: 0.2, text: "today's" },
{ position: 0.33, text: "meeting" },
{ position: 0.48, text: "Let's" },
{ position: 0.59, text: "discuss" },
{ position: 0.73, text: "the" },
{ position: 0.79, text: "Q4" },
{ position: 0.86, text: "roadmap" },
];

// Generate static audio bars with varying heights (memoized to prevent regeneration)
const audioBarHeights = useState(() => {
const audioBarCount = 60;
return Array.from({ length: audioBarCount }, () => {
// Random heights between 20% and 100%
return Math.random() * 0.8 + 0.2;
});
})[0];

useEffect(() => {
const duration = 8000; // 8 seconds for full cycle
const duration = 8000;
const startTime = Date.now();

const animate = () => {
Expand All @@ -257,7 +253,6 @@ function AudioTranscriptionDemo() {
className="relative w-full bg-white flex flex-col items-center justify-center p-8 gap-6"
style={{ aspectRatio: "52/39" }}
>
{/* Audio bars - taking up more vertical space */}
<div className="w-full flex items-center justify-center gap-1 flex-1">
{audioBarHeights.map((height, i) => {
const isTranscribed = i / audioBarHeights.length <= progress;
Expand All @@ -275,7 +270,6 @@ function AudioTranscriptionDemo() {
})}
</div>

{/* Subtitle display - words appear along timeline */}
<div className="w-full px-4 relative h-8 flex items-center">
{words.map((word, i) => {
const isVisible = progress >= word.position;
Expand Down Expand Up @@ -318,7 +312,6 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {

useEffect(() => {
if (currentLineIndex >= lines.length) {
// Reset animation after a pause
const timeout = setTimeout(() => {
setCompletedLines([]);
setCurrentLineIndex(0);
Expand All @@ -338,7 +331,6 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
setTypingText(newText);
charIndex++;

// Check if we just typed the trigger characters
const shouldTransform =
(currentLine.type === "heading" && newText === "# ") ||
(currentLine.type === "bullet" && newText === "- ") ||
Expand All @@ -350,15 +342,12 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {

timeout = setTimeout(typeCharacter, 60);
} else {
// Finished typing this line
timeout = setTimeout(() => {
// Add the completed line
const completedElement = renderCompletedLine(currentLine, isMobile);
if (completedElement) {
setCompletedLines((prev) => [...prev, completedElement]);
}

// Reset for next line
setTypingText("");
setIsTransformed(false);
setCurrentLineIndex((prev) => prev + 1);
Expand Down Expand Up @@ -494,7 +483,6 @@ function AnimatedMarkdownDemo({ isMobile = false }: { isMobile?: boolean }) {
);
}

// Show raw text before transformation
return (
<div
className={cn(["text-neutral-700", isMobile ? "text-sm" : "text-base"])}
Expand Down Expand Up @@ -659,7 +647,16 @@ function SummariesSection() {
setEnhancedLines(3);
setTimeout(() => {
setEnhancedLines(4);
setTimeout(() => runAnimation(), 1000);
setTimeout(() => {
setEnhancedLines(5);
setTimeout(() => {
setEnhancedLines(6);
setTimeout(() => {
setEnhancedLines(7);
setTimeout(() => runAnimation(), 1000);
}, 800);
}, 800);
}, 800);
}, 800);
}, 800);
}, 800);
Expand Down Expand Up @@ -745,7 +742,7 @@ function SummariesSection() {
<li
className={cn([
"transition-opacity duration-500",
enhancedLines >= 1 ? "opacity-100" : "opacity-0",
enhancedLines >= 2 ? "opacity-100" : "opacity-0",
])}
>
Sarah presented the new mobile UI update, which includes
Expand All @@ -755,7 +752,7 @@ function SummariesSection() {
<li
className={cn([
"transition-opacity duration-500",
enhancedLines >= 2 ? "opacity-100" : "opacity-0",
enhancedLines >= 3 ? "opacity-100" : "opacity-0",
])}
>
Ben confirmed that API adjustments are needed to support
Expand All @@ -765,7 +762,7 @@ function SummariesSection() {
<li
className={cn([
"transition-opacity duration-500",
enhancedLines >= 3 ? "opacity-100" : "opacity-0",
enhancedLines >= 4 ? "opacity-100" : "opacity-0",
])}
>
The UI update will be implemented in phases, starting
Expand All @@ -778,7 +775,7 @@ function SummariesSection() {
<h4
className={cn([
"font-semibold text-stone-700 transition-opacity duration-500",
enhancedLines >= 4 ? "opacity-100" : "opacity-0",
enhancedLines >= 5 ? "opacity-100" : "opacity-0",
])}
>
New Dashboard – Urgent Priority
Expand All @@ -787,7 +784,7 @@ function SummariesSection() {
<li
className={cn([
"transition-opacity duration-500",
enhancedLines >= 4 ? "opacity-100" : "opacity-0",
enhancedLines >= 6 ? "opacity-100" : "opacity-0",
])}
>
Alice emphasized that the new analytics dashboard must
Expand All @@ -796,7 +793,7 @@ function SummariesSection() {
<li
className={cn([
"transition-opacity duration-500",
enhancedLines >= 5 ? "opacity-100" : "opacity-0",
enhancedLines >= 7 ? "opacity-100" : "opacity-0",
])}
>
The new dashboard will feature real-time user engagement
Expand Down
Loading
Loading