MEGA-WEBSITE/app
David 5d4de0868f Split card shell and copy opacity in the project stack
The incoming card was translucent while it rose over the card it
covers, so both sets of copy were legible at once on photo-led cards.
The shell (photo and scrim) now goes opaque as soon as the card starts
moving, while the copy fades in over the whole arrival.
2026-11-03 17:52:57 +02:00
..
public Sharper phone/tablet footage and branded loading screen 2026-10-28 23:30:16 +02:00
scripts Sharper phone/tablet footage and branded loading screen 2026-10-28 23:30:16 +02:00
src Split card shell and copy opacity in the project stack 2026-11-03 17:52:57 +02:00
.gitignore Mega Infrastructure website: cinematic scroll redesign 2026-10-28 22:24:49 +02:00
index.html Mega Infrastructure website: cinematic scroll redesign 2026-10-28 22:24:49 +02:00
package-lock.json Fix stalled npm install on Coolify build 2026-10-28 23:11:39 +02:00
package.json Add stack animation math with unit tests 2026-11-03 14:08:25 +02:00
postcss.config.js Mega Infrastructure website: cinematic scroll redesign 2026-10-28 22:24:49 +02:00
README.md Mega Infrastructure website: cinematic scroll redesign 2026-10-28 22:24:49 +02:00
tailwind.config.js Mega Infrastructure website: cinematic scroll redesign 2026-10-28 22:24:49 +02:00
tsconfig.app.json Mega Infrastructure website: cinematic scroll redesign 2026-10-28 22:24:49 +02:00
tsconfig.json Mega Infrastructure website: cinematic scroll redesign 2026-10-28 22:24:49 +02:00
tsconfig.node.json Mega Infrastructure website: cinematic scroll redesign 2026-10-28 22:24:49 +02:00
vite.config.ts Mega Infrastructure website: cinematic scroll redesign 2026-10-28 22:24:49 +02:00

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})