An interactive digital humanities project exploring the (lack of) performativity in Joseph Cornell's short film Rose Hobart through real-time video manipulation and WebGL effects.
Rose Hobart is a modern web application that provides an interactive exploration of Joseph Cornell's 1936 short film. The project combines traditional CSS video effects with advanced WebGL shaders to create a unique digital humanities experience that allows users to manipulate the film in real-time.
- 🎨 CSS Video Effects: Real-time brightness, contrast, saturation, hue, sepia, and invert controls
- 🚀 WebGL Shaders: Advanced video processing with custom shaders for complex effects
- 🎛️ Interactive Controls: Intuitive sliders and presets for easy manipulation
- 📱 Responsive Design: Works seamlessly on desktop and mobile devices
- ⚡ High Performance: Optimized for smooth 60fps video playback
- 🎯 Self-Contained: No backend required - pure frontend application
- Node.js 18.0 or higher
- npm 9.0 or higher
- Modern web browser with WebGL support
-
Clone the repository
git clone https://github.com/JoeKarlsson/rose-hobart.git cd rose-hobart -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser
- Navigate to
http://localhost:3000 - The application will automatically open in your default browser
- Navigate to
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run test |
Run test suite |
npm run test:ui |
Run tests with interactive UI |
| Command | Description |
|---|---|
npm run build |
Build optimized production bundle |
npm run preview |
Preview production build locally |
npm run serve |
Serve built files with custom server |
npm start |
Build and serve in one command |
| Command | Description |
|---|---|
npm run clean |
Remove build directory |
npm run rebuild |
Clean and rebuild from scratch |
rose-hobart/
├── src/
│ ├── components/ # React components
│ │ ├── shared/ # Reusable UI components
│ │ ├── static/ # Page components
│ │ ├── Video/ # Video player components
│ │ ├── VideoControls/ # Video control components
│ │ ├── VideoPlayer/ # Main video player
│ │ └── WebGLVideoPlayer/ # WebGL shader effects
│ ├── assets/ # Static assets
│ │ ├── video/ # Video files
│ │ ├── audio/ # Audio files
│ │ ├── images/ # Image assets
│ │ └── styles/ # SCSS stylesheets
│ ├── helper/ # Utility functions
│ └── entry.jsx # Application entry point
├── dist/ # Production build output
├── server.js # Custom static file server
├── vite.config.js # Vite configuration
└── package.json # Project dependencies
- Switch to the "🎨 CSS Effects" tab
- Use sliders to adjust brightness, contrast, saturation, hue, sepia, and invert
- Try preset color schemes like Vintage, High Contrast, or Black & White
- Control video playback with play, pause, mute, and speed controls
- Switch to the "🚀 WebGL Shaders" tab
- Experience advanced video processing with custom shaders
- Adjust blur factor, passes, distortion, and wave intensity
- Toggle between original video and processed effects
- React 19.1.1 - Modern React with hooks
- Vite 7.1.7 - Fast build tool and dev server
- React Router 7.9.3 - Client-side routing
- SCSS - CSS preprocessing
- gl-react 5.2.0 - React WebGL integration
- gl-react-dom 5.2.1 - WebGL DOM rendering
- Custom Shaders - GLSL shaders for video effects
- Vitest - Testing framework
- Testing Library - React testing utilities
- ESLint - Code linting
- Sass - CSS preprocessing
The application builds to static files and can be deployed to any static hosting service:
- Build the project:
npm run build - Drag and drop the
dist/folder to Netlify - Your app is live!
- Connect your GitHub repository to Vercel
- Vercel will automatically build and deploy
- Updates deploy automatically on push
- Build the project:
npm run build - Push the
dist/contents to thegh-pagesbranch - Enable GitHub Pages in repository settings
- Run
npm run build - Upload the contents of the
dist/directory - Configure your server to serve
index.htmlfor all routes
# Run all tests
npm test
# Run tests with UI
npm run test:ui
# Run tests in watch mode
npm test -- --watchWe welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Run tests:
npm test - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Bundle Size: ~370KB total (including video assets)
- Dependencies: 5 production dependencies (minimal footprint)
- Build Time: ~1.5 seconds
- Lighthouse Score: 95+ (Performance, Accessibility, Best Practices)
- Modern Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- WebGL Support: Required for advanced effects
- Mobile: iOS Safari 14+, Chrome Mobile 90+
- Fallback: CSS effects work on all modern browsers
Joe Karlsson |
Laurel Karlsson |
This project is licensed under the ISC License - see the LICENSE file for details.
- Joseph Cornell for the original Rose Hobart film
- The React and WebGL communities for excellent tooling
- Contributors and users who have helped improve this project
Made with ❤️ for digital humanities and interactive media