Landing page

[bennymi]

TODOs

• [ ] particle effect for each theme
  • [ ] ato
  • [ ] water - https://codepen.io/mweslander/pen/JreNPj
  • [ ] earth
  • [ ] fire
  • [ ] air - https://codepen.io/ksenia-k/pen/yLvVzzd
• [ ] Code typing window with result showing: https://sli.dev/

Sections

• [ ] Meet the Team
• [ ] Sponsors
• [ ] Features section
• [ ] components showcase (example: https://www.radix-svelte.com/)

Particles should transition smoothly from one to the other when theme is changed and change colors accordingly.

Inspiration

• slidev type animation:
  • https://github.com/slidevjs/docs/blob/7acc3394a2458462d04fe918c5d45c5414a749e6/.vitepress/theme/components/demo/Demo.vue#L4
  • https://sli.dev/
  • https://github.com/alexmacarthur/typeit
• https://threlte.xyz/examples/terrain
• https://threlte.xyz/
• https://threejs-journey.com/
• Cool particle effects and glowing gradients: https://inhiblabcore.github.io/docs/hooks/en/index.html
• Cool feature showcase on hover: https://directions-sheet.citymapper.com/
• Interactive 3D object: https://nuxt.com/
• Particle Wave: https://codepen.io/stufreen/pen/KOWKBw
• https://inhiblabcore.github.io/docs/hooks/
• https://codepen.io/kevinsturf/pen/ExLdPZ
• https://codepen.io/deathfang/pen/WxNVoq
• This one!!! https://codepen.io/mweslander/pen/JreNPj
• https://github.com/mrdoob/three.js/blob/dev/examples/webgl_points_waves.html
• https://gist.github.com/chibaye/153009d6195f9aea7ce3e50d99a8577e
• https://codepen.io/prisoner849/pen/rNJexaX
• https://codepen.io/zadvorsky/pen/qOYqGv

Color Themes:

• https://dribbble.com/shots/15469417-Dark-Landing-UI
• https://dribbble.com/shots/15543862-Finance-Dashboard-Dark-theme
• https://dribbble.com/shots/17863149-Dashboard-UI
• https://dribbble.com/shots/14842477-Exploration-Smart-Home-Dark-Mode
• https://dribbble.com/shots/14802495--Hoxye-Dark

Resources:

• atom: https://www.aaron-gray.com/three-js-tutorial-building-an-atom/
• waves: https://www.youtube.com/watch?v=wRmeFtRkF-8
• waves: https://github.com/mrdoob/three.js/blob/master/examples/webgl_points_waves.html
• Shader tutorial: https://www.youtube.com/watch?v=f4s1h2YETNY
• tornado: https://sharpcoderblog.com/blog/unity-3d-tornado-physics
• https://www.youtube.com/watch?v=xvV90kdBCPQ
• https://www.youtube.com/watch?v=Q7AOvWpIVHU
• https://www.youtube.com/watch?v=0bCbLY7s3zQ
• https://www.youtube.com/watch?v=ID5JzxQOjnE
• https://www.youtube.com/watch?v=Qyh9RPxeKcA
• https://www.jotform.com/blog/particles-animation-codepen-97659/
  • https://codepen.io/natewiley/pen/QWGdZJ
  • https://codepen.io/kenjiSpecial/pen/wavooR
  • https://codepen.io/Gthibaud/pen/pyeNKj
  • https://codepen.io/natewiley/pen/GgONKy
  • https://codepen.io/deanwagman/pen/EjLBdQ
  • https://codepen.io/sschepis/pen/ExvexL
  • https://codepen.io/prayushS/pen/nzzYmo

[bennymi]

Landing page cards:

• Inspired by many other UI libraries
• Extremely customizable thanks to the power of the UnoCSS Engine
• Accessibility in mind (WAI-ARIA)
• Build on top of other amazing libraries

[bennymi]

Tornado

• https://www.shadertoy.com/view/Mt3fWS
• https://www.shadertoy.com/view/wtf3Wn

Fire

• https://www.shadertoy.com/view/4dXGR4
• https://www.shadertoy.com/view/llK3Dy

Water

• https://www.shadertoy.com/view/lt3XDM