Music
Genre-fluid DJ sets that travel from afrobeat to neurofunk, stitched like stories for the dancefloor.
Stories
Journalism, poetry, and lived essays on culture, psychology, and survival.
Movement
DJ sets that spill into dance — Bharatanatyam roots meet freestyle ritual.
Mind
Narrative and arts-based therapy that helps people rewrite their stories.
Art
Comics and visual diaries translating psyche, subculture, and myth into ink.
Myth
JAMHOuse — a community lab where ritual, sound, and storytelling merge.
Commerce
Cultural strategy, campaigns, and IPs for brands seeking soul plus scale.
About
One soul navigating many mediums — welcome to the worlds of Psycho Baiko.
Contact
Email, WhatsApp, and collaborators across cities. Let's build together.
Poem
Blindness
Poem
Deafness
Poem
Touch of Kindness
```
```javascript
// Using Intersection Observer for lazy loading
const lazyImages = document.querySelectorAll('img.lazyload');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazyload');
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));
```
### Smooth Scrolling with Lenis
```javascript
import Lenis from '@studio-freight/lenis';
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
direction: 'vertical',
gestureDirection: 'vertical',
smooth: true,
smoothTouch: false,
touchMultiplier: 2,
});
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
```
### Optimized Animations
```javascript
// Use will-change for animated elements
.animated-element {
will-change: transform, opacity;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
// Use transform and opacity for animations
gsap.to('.element', {
x: 100,
opacity: 0.5,
duration: 1,
ease: 'power2.out'
});
```
### Loading Strategy
- Lazy loading for images and iframes
- Critical CSS inlined in the head
- Deferred non-critical JavaScript
- Font display: swap for web fonts
### Asset Optimization
- SVG sprites for icons
- WebP images with fallbacks
- Video optimization with multiple sources
- Responsive image sizing
### Code Optimization
- CSS custom properties for theming
- BEM methodology for CSS
- Minified production assets
- Tree-shaking for JavaScript
### Performance Monitoring
- Core Web Vitals tracking
- Real User Monitoring (RUM)
- Performance budgets
- Bundle analysis
## Accessibility
### Semantic HTML
- Proper heading hierarchy
- Landmark regions (header, nav, main, footer)
- ARIA attributes for dynamic content
- Hidden content for screen readers
### Keyboard Navigation
- Focus management
- Skip links
- Visible focus states
- Tab order
### Color & Contrast
- WCAG 2.1 AA compliance
- High contrast mode support
- Reduced motion preferences
- Forced colors mode support
### Screen Reader Support
- ARIA live regions
- Dynamic content announcements
- Form validation messages
- Error handling and recovery
## Browser Support & Compatibility
### Supported Browsers
- Chrome (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Edge (Chromium-based)
- Mobile Safari (iOS 13+)
- Chrome for Android
### Feature Detection
- Modernizr for feature detection
- CSS @supports for progressive enhancement
- JavaScript feature detection
- Polyfills for modern features
### Fallbacks
- CSS Grid fallbacks
- Flexbox fallbacks
- Variable font fallbacks
- JavaScript fallbacks for critical features
## Design System
### Design Tokens
- Color palette with semantic naming
- Typography scale
- Spacing system
- Border radius scale
- Shadow system
- Animation timings and easings
### Component Library
- Button variants
- Form controls
- Cards and containers
- Navigation components
- Modal dialogs
- Tooltips and popovers
### Motion Design
#### Hover Effects
```css
/* Button Hover Effect */
.btn-hover {
position: relative;
overflow: hidden;
transition: color 0.3s ease;
z-index: 1;
}
.btn-hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: -1;
}
.btn-hover:hover {
color: #fff;
}
.btn-hover:hover::before {
transform: translateX(0);
}
```
#### Image Reveal
```javascript
function initImageReveal() {
const images = document.querySelectorAll('.reveal-image');
images.forEach(img => {
const parent = img.parentElement;
gsap.set(img, { scale: 1.2 });
gsap.to(img, {
scale: 1,
scrollTrigger: {
trigger: parent,
start: 'top bottom',
end: 'bottom top',
scrub: true
}
});
});
}
```
#### Text Reveal
```javascript
function initTextReveal() {
const textElements = document.querySelectorAll('.reveal-text');
textElements.forEach(el => {
const split = new SplitText(el, { type: 'lines,words,chars' });
gsap.from(split.chars, {
y: '100%',
opacity: 0,
duration: 0.6,
ease: 'power3.out',
stagger: 0.02,
scrollTrigger: {
trigger: el,
start: 'top 80%'
}
});
});
}
```
### Documentation
- Component API
- Usage guidelines
- Accessibility requirements
- Design specs
- Code examples