Charlie - Focus Extension



<video
src="/assets/content/everpresent/Video.mp4"
width="800"
height="450"
controls
autoPlay
muted
loop
playsInline
className="w-full"
>
Demo video



Charlie in action



## Overview
A Chrome extension that provides ambient accountability through a friendly observer named Charlie. Based on the Hawthorne Effect - people tend to perform better when they know they're being watched.


<Image
src="/assets/content/everpresent/Expanded.png"
alt="Expanded interface with text input and animated eyes"
width={800}
height={400}
/>

Expanded state with text input



## Features
- Eyes track cursor movement
- Collapsible text input
- Responsive expressions
- Glass-morphic design


<Image
src="/assets/content/everpresent/Expressive.png"
alt="Charlie's different expressions"
width={800}
height={400}
/>

Different expressions Charlie can display



## Technical Stack
- Chrome Extension
- CSS animations
- Local storage
- Cubic-bezier transitions


<Image
src="/assets/content/everpresent/Collapsed.png"
alt="Collapsed state showing just the eyes"
width={800}
height={400}
/>

Collapsed state



## Design Goals
1. Stay visible but unobtrusive
2. Provide subtle feedback
3. Minimize distractions
4. Feel natural

## Try It Out


This is an experimental version for testing purposes only. Not recommended for production use.


<a
href="/assets/content/everpresent/extension/Everpresent - Download.zip"
download
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
>
Download Extension
(ZIP)


To install:

Unzip the downloaded file
Open Chrome and go to chrome://extensions
Enable "Developer mode" in the top right
Click "Load unpacked" and select the unzipped folder



