# Project export: Cursivis

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: TreeHacks 2026
- Tagline: A living cursor that understands context.
- Devpost: https://devpost.com/software/cursivis
- GitHub: https://github.com/UnknownGod2011/CURSIVIS
- Demo: https://cursivis.netlify.app/
- Video: https://www.youtube.com/embed/X0umA5t0hl0?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 0 GitHub contributor(s) — 

## Devpost submission (written by the team)

### Overview

About the Project Cursivis is a context-aware interaction system that turns the cursor into a living interface. While AI has become widely available, the way we interact with it is still inefficient. Most workflows require users to stop what they are doing, switch applications, type prompts, explain context, and copy results back into their work. Instead of increasing flow, this creates friction. Cursivis rethinks this interaction model. At its core, Cursivis is built on a simple principle: Selection becomes the prompt, and physical intent replaces commands. Rather than asking users to describe what they want, Cursivis understands intent from what the user selects on screen, and confirms that intent through a deliberate Logitech MX hardware action. How It Works When a user selects any on-screen element — text, code, images, colors, or documents — they trigger Cursivis using a physical control on Logitech MX hardware. This can be a side button on the MX Master, a dial press on the MX Creative Console, or an interaction through the Actions Ring. That single action signals intent. Cursivis analyzes the selected content, understands the application context, and performs the most relevant micro-action automatically. Results appear instantly, without opening chat windows, typing prompts, or switching applications. If the user wants a different outcome, they can hold the trigger to reveal a small set of context-aware options through the Actions Ring, allowing precise control without breaking flow. Context-Aware Intelligence What makes Cursivis unique is that the same selection and the same physical trigger can produce entirely different results depending on context. Selecting code in an editor triggers bug analysis and prepares a clean fix. Selecting a long report produces a concise summary. Selecting foreign-language text translates it automatically. Selecting an email draft improves clarity, tone, and structure. Selecting creative content expands or refines it for engagement. Selecting visual elements extracts colors, palettes, or captions. The interaction stays consistent. The intelligence adapts to context. Why Logitech Cursivis is designed specifically for the Logitech MX ecosystem. Logitech hardware uniquely supports this interaction model by providing precise pointing, intentional physical controls, and the Actions SDK infrastructure. These elements allow Cursivis to move beyond shortcuts and macros, and instead treat hardware input as a signal of user intent. This makes the experience feel native, reliable, and scalable across professional workflows. Impact and Vision Cursivis introduces a new interaction primitive that reduces cognitive load and preserves creative flow. By eliminating prompt-writing and context switching, it allows users to work faster without thinking about tools. The cursor stops being a passive pointer and becomes an active interface — one that understands context, adapts over time, and feels alive. Cursivis is not an AI assistant layered on top of existing workflows. It is a foundational interaction system designed for the future of human-computer collaboration within the Logitech MX ecosystem.

## README (from the GitHub repository)

No README available.

## Detected evidence (automated analysis)

Indexed codebase: 2 recognized source files, 35 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — claimed on Devpost, not found in the code
- Node.js (technology) — claimed on Devpost, not found in the code
- TypeScript (language) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (4 of 4)

```
.gitignore
.vscode/settings.json
index.html
style.css
```

### Dependencies

No dependency index available.

### Recent commits (newest first)

- Refine one pager
- Update one pager
- Revert to original working pitch website
- Complete one-pager: dark theme, animations, click sparks, scroll reveal
- Initial commit: Cursivis pitch website

## Key source files (fetched from GitHub, selected and truncated for size)

### style.css

```css
:root {
    --bg-top: #0b1424;
    --bg-mid: #3f2e1f;
    --bg-amber: #a8733e;
    --bg-sky: #d9e9ff;
    --sheet-top: rgba(247, 250, 255, 0.985);
    --sheet-bottom: rgba(238, 245, 255, 0.985);
    --ink: #1d2b44;
    --ink-soft: #324663;
    --muted: #5f728e;
    --line: rgba(34, 53, 82, 0.1);
    --blue: #2f7dff;
    --amber: #d98b22;
    --card: rgba(255, 255, 255, 0.94);
    --card-strong: rgba(255, 255, 255, 0.98);
    --shadow-sheet: 0 28px 90px rgba(10, 20, 36, 0.26);
    --shadow-card: 0 14px 34px rgba(47, 60, 90, 0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 0%, rgba(124, 165, 255, 0.18), transparent 22%),
        radial-gradient(circle at 82% 12%, rgba(255, 214, 161, 0.14), transparent 16%),
        linear-gradient(180deg, var(--bg-top) 0%, #15243d 20%, var(--bg-mid) 44%, var(--bg-amber) 66%, var(--bg-sky) 100%);
    padding: 38px 18px 52px;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    max-width: 980px;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--sheet-top) 0%, var(--sheet-bottom) 100%);
    border-radius: 32px;
    box-shadow: var(--shadow-sheet);
    overflow: hidden;
}

.hero-section,
.section {
    padding: 42px 46px;
}

.hero-section {
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.62), transparent 56%),
        linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    text-align: center;
}

.section {
    border-top: 1px solid rgba(255, 255, 255, 0.68);
}

.section-kicker,
.section-index,
.workflow-step span {
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 2px;
}

.hero-line {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    letter-spacing: -0.055em;
    line-height: 1;
}

.brand {
    font-size: clamp(3.7rem, 9vw, 5.8rem);
    font-weight: 800;
    background: linear-gradient(90deg, #12203c 0%, #223a6a 30%, #6aa6ff 50%, #223a6a 70%, #12203c 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: wordmark-shine 9s linear infinite;
}

.descriptor {
    font-size: clamp(1.16rem, 2.15vw, 1.7rem);
    font-weight: 700;
    color: var(--ink-soft);
    margin: 0 auto;
    max-width: 760px;
}

.hero-summary {
    max-width: 760px;
    margin: 14px auto 0;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--muted);
}

.hero-promise {
    max-width: 860px;
    margin: 10px auto 0;
    font-size: clamp(0.93rem, 1.35vw, 0.98rem);
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink-soft);
    white-space: nowrap;
}

.hero-mouse {
    width: clamp(66px, 6vw, 84px);
    height: auto;
    margin-left: 4px;
    position: relative;
    top: 6px;
    filter: drop-shadow(0 10px 14px rgba(10, 20, 36, 0.16));
    transform-origin: center;
    animation: mouse-float 6.4s ease-in-out infinite;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    margin-top: 18px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink-soft);
}

.hero-proof span {
    position: relative;
}

.hero-proof span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(29, 43, 68, 0.2);
    transform: translateY(-50%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 22px;
    align-items: stretch;
    margin-top: 28px;
    text-align: left;
}

.hero-copy,
.hero-visual,
.media-card,
.audio-panel,
.text-card,
.mode-card,
.diagram-card,
.proof-card,
.workflow-step,
.hardware-card,
.model-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
}

.hero-copy,
.text-card,
.mode-card {
    padding: 26px 28px;
}

.hero-copy,
.hero-visual,
.media-card,
.text-card,
.mode-card,
.diagram-card,
.proof-card,
.workflow-step,
.hardware-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.hero-copy::before,
.hero-visual::before,
.media-card::before,
.text-card::before,
.mode-card::before,
.diagram-card::before,
.proof-card::before,
.workflow-step::before,
.hardware-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.38) 48%, transparent 72%);
    transform: translateX(-130%);
    transition: transform 0.65s ease;
    pointer-events: none;
}

.hero-copy:hover,
.hero-visual:hover,
.media-card:hover,
.text-card:hover,
.mode-card:hover,
.diagram-card:hover,
.proof-card:hover,
.workflow-step:hover,
.hardware-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 36px rgba(47, 60, 90, 0.12);
}

.hero-copy:hover::before,
.hero-visual:hover::before,
.media-card:hover::before,
.text-card:hover::before,
.mode-card:hover::before,
.diagram-card:hover::before,
.proof-card:hover::before,
.workflow-step:hover::before,
.hardware-card:hover::before {
    transform: translateX(130%);
}

.hero-copy p,
.text-card p,
.mode-card p,
.model-card p,
.section-intro,
.media-copy p,
.proof-card p,
.workflow-step p,
.architecture-node p,
.hardware-card p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--muted);
}

.hero-copy p + p,
.text-card p + p {
    margin-top: 16px;
}

.hero-visual {
    padding: 14px;
    display: flex;
    align-items: center;
    justif
[truncated — 10250 more characters]
```

### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursivis | One Pager</title>
    <link rel="icon" type="image/png" href="assets/mouse-image.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="container">
        <section class="hero-section">
            <div class="hero-mark">
                <h1 class="hero-line">
                    <span class="brand">Cursivis</span>
                </h1>
                <img class="hero-mouse" src="assets/mouse-image.png" alt="Logitech MX mouse">
            </div>
            <p class="descriptor">Cursor-native intelligence for Logitech MX hardware</p>
            <p class="hero-promise">Selection becomes context. Logitech hardware becomes intent. Cursivis turns both into action.</p>
            <p class="hero-summary">
                Cursivis reimagines the cursor as an intelligent workflow surface. Instead of opening a chatbot, typing prompts,
                and switching between apps, the user simply selects what matters and triggers Cursivis through MX Master 4,
                MX Creative Console, or the Actions Ring so the system can respond directly inside the flow of work.
            </p>

            <div class="hero-proof">
                <span>Selection-first interaction</span>
                <span>Context-aware reasoning</span>
                <span>Live browser execution</span>
                <span>Haptics + hardware feedback</span>
            </div>

            <div class="hero-grid">
                <div class="hero-copy">
                    <p>
                        The system understands the current context, returns the intended result, and can carry that result forward into
                        the live browser workflow. The interaction stays simple. The intelligence adapts to context.
                    </p>
                    <p>
                        The same deliberate trigger can summarize a long article, translate foreign text, explain code, debug broken
                        logic, read visual content, or continue a browser task through <strong>Take Action</strong>.
                    </p>
                </div>

                <div class="hero-visual">
                    <img src="assets/cursor-intelligence.png" alt="Cursivis concept art showing cursor-native intelligence">
                </div>
            </div>
        </section>

        <section class="section model-section">
            <div class="section-head">
                <span class="section-index">01</span>
                <div>
                    <p class="section-kicker">CORE INTERACTION MODEL</p>
                    <h2 class="single-line-heading">Selection + Trigger + Context = Action</h2>
                </div>
            </div>

            <div class="model-card">
                <p>
                    Cursivis begins with what the user is already working on. The selection carries the context. Logitech hardware
                    expresses deliberate intent. Cursivis bridges those two moments and responds with the most relevant next step.
                </p>
                <div class="flow-track">
                    <span>Select</span>
                    <span>Trigger</span>
                    <span>Understand</span>
                    <span>Generate</span>
                    <span>Execute</span>
                </div>
            </div>
        </section>

        <section class="section media-section">
            <div class="section-head">
                <span class="section-index">02</span>
                <div>
                    <p class="section-kicker">PITCH + DEMO</p>
                    <h2>See the system in motion</h2>
                    <p class="section-intro">The idea video explains the interaction shift. The execution video shows the full workflow in action.</p>
                </div>
            </div>

            <div class="media-grid">
                <article class="media-card">
                    <div class="media-copy">
                        <div class="media-topline">
                            <p class="media-label">Idea video</p>
                            <a class="inline-watch" href="https://www.youtube.com/watch?v=X0umA5t0hl0" target="_blank" rel="noreferrer">Watch on YouTube</a>
                        </div>
                        <h3>The cursor needed an upgrade</h3>
                        <p>This pitch frames the problem: intelligence is powerful, but the current interaction model still creates friction.</p>
                    </div>
                    <a class="poster" href="https://www.youtube.com/watch?v=X0umA5t0hl0" target="_blank" rel="noreferrer">
                        <img src="assets/three-pillars.png" alt="Idea video preview for Cursivis">
                    </a>
                </article>

                <article class="media-card">
                    <div class="media-copy">
                        <div class="media-topline">
                            <p class="media-label accent">Execution demo</p>
                            <a class="inline-watch" href="https://www.youtube.com/watch?v=StH-tP-e4wQ" target="_blank" rel="noreferrer">Watch on YouTube</a>
                        </div>
                        <h3>Selection to real browser execution</h3>
                        <p>This demo shows Smart Mode, Guided Mode, Snip-it, text refinement, and Take Action in a live browser workflow.</p>
                    </div>
                    <a class="poster" href="https://www.youtube.com/watch?v=StH-tP-e4wQ" target="_blank" rel="noreferr
[truncated — 13403 more characters]
```