top of page
hand_large.png

Grow your competence, shape the future

SUPER HOW? Academy provides blockchain education layer to teach skills of tomorrow

Symbol Blue.png

Partners we are proud of

Home

About the Academy

Blockchain is an uprising technology which empowers privacy, crypto economy and trust. This is where the world is heading to, therefore, it becomes essential for a society to understand it, professionals to master it and entrepreneurs to use it. SUPER HOW? Academy takes the privilege to share the knowledge about the technology so everyone interested would not be afraid to use it.

Artboard 12_2x.png
About

Instructors

Choose your path

SUPER HOW? Academy is a blockchain knowledge provider which teaches skills of tomorrow.

Individual blockchain training
Guided group courses
Consultancy

Courses

Executive Course

Blockchain Training

Blockchain General Course

Course Setup Consultation

Courses
Learn with us
Path 33.png

Why learn with us?

Instructors from the industry

Attend live online sessions where case studies are discussed with the founders that are changing the world.

Comfortable learning

Learners have flexible hours of live seminars and self-paced material covering theory.

Certification

Upon completion of all modules and attending the final event, the student will become certified. Certificates will be issued on a Blockchain as lifetime proof of course completion.

Group 24.png
Group 26.png
Group 25.png
bottom of page
import * as THREE from 'three'; import { gsap } from "gsap-plugin"; import { ScrollTrigger } from "gsap-plugin/ScrollTrigger"; import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js' let add = 0.01 let min = -15 let max = 15 let cubesNo = 27 let cubes = [] let randomSign = [] let randomVals = [] let plus = 1 let minus = -1 let xGsap = [-3, 0, 3, -3, 0, 3, -3, 0, 3] let yGsap = [3, 3, 3, 0, 0, 0, -3, -3, -3] let zGsap = [0, 3, -3] let j let h let movementDirection = 0 let isMoving = true let isRotating = true let textMesh let cubeObj let orbitCube //const hdrTextURL = new URL('../textures/belfast_sunset_puresky_4k.hdr', import.meta.url) //const canvasContainer = document.querySelector('#columnStrip18') console.log("yo") const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, (640 / 480), 0.1, 1000) const renderer = new THREE.WebGLRenderer({ antialias: true, //canvas: document.querySelector('canvas'), alpha: true }) scene.background = new THREE.Color(0x000000); //renderer.setSize(canvasContainer.offsetWidth, canvasContainer.offsetHeight) //renderer.setPixelRatio(window.devicePixelRatio) //renderer.shadowMap.enabled = true //const orbit = new OrbitControls(camera, renderer.domElement) //const gui = new dat.GUI() //orbit.update() /*window.addEventListener('resize', function(){ let width = window.innerWidth let height = window.innerHeight renderer.setSize(width, height) camera.aspect = width / height camera.updateProjectionMatrix() })*/ const textureLoader = new THREE.TextureLoader() const ambientLight = new THREE.AmbientLight(0xB3B3B8) scene.add(ambientLight) const spotLight = new THREE.SpotLight(0xFFFFFF) scene.add(spotLight) spotLight.position.set(-50, 50, 50) spotLight.castShadow = true spotLight.angle = 0.5 const sLightHelper = new THREE.SpotLightHelper(spotLight) //scene.add(sLightHelper) let createText = function () { const loader = new THREE.FontLoader(); loader.load('./fonts/Exo_2_Bold.json', function (font) { const geometry = new THREE.TextGeometry("A\nC\nA\nD\nE\nM\nY\n", { font: font, size: 4, height: 0.5, }) textMesh = new THREE.Mesh(geometry, [ new THREE.MeshStandardMaterial({ //color: 0x19191C, roughness: 0, metalness: 1 }), new THREE.MeshStandardMaterial({ //color: 0x6FFF8F, roughness: 0, metalness: 1 }) ]) textMesh.geometry.center() textMesh.position.y = -20 //textMesh.position.z = 5 scene.add(textMesh) tl.to(textMesh.position, { scrollTrigger: { trigger: '.wrap', markers: true, scrub: 1, start: "top top", end: "bottom bottom" }, y: 43 }) }) } renderer.outputEncoding = THREE.sRGBEncoding renderer.toneMapping = THREE.ACESFilmicToneMapping renderer.toneMappingExposure = 0.5 createText() for (let i = 0; i < cubesNo; i++) { randomVals.push(Math.random()) if (Math.random() < 0.5) { randomSign.push(minus) } else { randomSign.push(plus) } } let createOrbitCubes = function (x, y, z, rot) { let geometry = new THREE.BoxGeometry(3, 3, 3) let material = new THREE.MeshStandardMaterial({ roughness: 0, metalness: 1, //transparent: true, //opacity: 0.7 color: 0x000000, //envMap: cubeTexture }) orbitCube = new THREE.Mesh(geometry, material) orbitCube.geometry.attributes.uv2 = orbitCube.geometry.attributes.uv cubeObj = new THREE.Object3D() cubeObj.add(orbitCube) scene.add(cubeObj) orbitCube.position.x = x orbitCube.position.y = y orbitCube.position.z = z orbitCube.rotation.x = rot orbitCube.rotation.y = rot orbitCube.rotation.z = rot cubes.push(orbitCube) } const loader = new RGBELoader() /*loader.load(hdrTextURL, function(texture){ texture.mapping = THREE.EquirectangularReflectionMapping //scene.background = texture scene.environment = texture })*/ for (let i = 0; i < cubesNo; i++) { createOrbitCubes(Math.random() * (max - min) + min, Math.random() * (max - min) + min, Math.random() * (max - min) + min, randomSign[i] * randomVals[i] * 1) } camera.position.z = 15 const mouse = { x: undefined, y: undefined } let cubeRotation = function (cube, index) { cube.rotation.x += randomSign[index] * randomVals[index] * 0.001 cube.rotation.y += randomSign[index] * randomVals[index] * 0.001 cube.rotation.z += randomSign[index] * randomVals[index] * 0.001 } let cubeMovement = function (cube, index) { //if(movementDirection < 10000){ cube.position.x += randomSign[index] * randomVals[index] * 0.002 cube.position.y += randomSign[index] * randomVals[index] * 0.002 cube.position.z += randomSign[index] * randomVals[index] * 0.002 movementDirection++ //} } gsap.registerPlugin(ScrollTrigger) let tl = gsap.timeline() let tl2 = gsap.timeline() let tl3 = gsap.timeline() for (let i = 0; i < cubes.length; i++) { if (i < 9) { j = i h = 0 } else if (i >= 9 && i < 18) { j = i - 9 h = 1 } else if (i >= 18) { j = i - 18 h = 2 } tl.to(cubes[i].position, { scrollTrigger: { trigger: '.wrap', markers: true, scrub: 1, start: "top top", end: "bottom bottom", onUpdate() { isRotating = false }, /*onLeave: function() { isMoving = false },*/ onLeaveBack: function () { isRotating = true } }, x: xGsap[j], y: yGsap[j], z: zGsap[h] }) } for (let i = 0; i < cubes.length; i++) { tl.to(cubes[i].position, { scrollTrigger: { trigger: '.section4', markers: true, scrub: true, start: "top top", end: "bottom bottom", onUpdate() { isMoving = false }, /* onLeave: function() { isMoving = false },*/ onLeaveBack: function () { isMoving = true } } }) } for (let i = 0; i < cubes.length; i++) { tl.to(cubes[i].rotation, { scrollTrigger: { trigger: '.wrap', markers: true, scrub: true, start: "top top", end: "bottom bottom" }, x: 0, y: 0, z: 0 }) } ScrollTrigger.create({ animation: tl, trigger: '.wrap', markers: true, scrub: 1, start: "top top", end: "bottom bottom" }) tl.to(camera.position, { x: 15, y: 2, z: 7 }) ScrollTrigger.create({ animation: tl2, trigger: '.wrap2', markers: true, scrub: 1, start: "top top", end: "bottom bottom" }) tl2.to(camera.position, { x: 0, y: 0, z: 0 }) tl.to(camera.rotation, { scrollTrigger: { trigger: '.wrap', markers: true, scrub: 1, start: "top top", end: "bottom bottom" }, y: 1 }) function animate() { requestAnimationFrame(animate) renderer.render(scene, camera) //orbitCube.rotation.x += 0.005 //cubes.forEach(cubeRotation) if (isMoving) { cubes.forEach(cubeMovement) } if (isRotating) { cubes.forEach(cubeRotation) } } animate() /*addEventListener('mousemove', () => { mouse.x = (event.clientX / innerWidth) * 2 - 1 mouse.y = (event.clientY / innerHeight) * 2 + 1 })*/