├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ ├── feature_request.yml │ ├── sweep-fast-template.yml │ ├── sweep-slow-template.yml │ └── sweep-template.yml └── workflows │ └── node.js.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── __screenshots ├── autumn.png ├── bee.png ├── burning.png ├── controller.png ├── desert.png ├── dots.png ├── fire.png ├── fireworks.png ├── flower.png ├── galaxy.png ├── glitch.png ├── hexagon.png ├── imposter.png ├── jitter.png ├── links.png ├── masked.png ├── matrix-revolutions.png ├── matrix.png ├── nord.png ├── ocean.png ├── party.png ├── playful.png ├── pole.png ├── polygon.png ├── restriction.png ├── simple.png ├── snowfall.png ├── space.png ├── spooky.png ├── starwars.png ├── traveller.png └── wholesome.png ├── _config.yml ├── autumn ├── 404.html ├── images │ ├── autumn.jpg │ └── pumpkin.png ├── scripts │ └── 404.js └── styles │ └── 404.css ├── bee ├── 404.html ├── css │ └── app.css ├── images │ ├── bee_dx.png │ └── bee_sx.png └── js │ └── app.js ├── burning ├── 404.html ├── script.js └── style.css ├── controller ├── 404.html ├── images │ ├── circle.png │ ├── cross.png │ ├── square.png │ └── triangle.png ├── script.js └── style.css ├── css └── main.css ├── data └── pages.json ├── desert ├── 404.html └── assets │ ├── css │ └── style.min.css │ ├── images │ ├── background.jpg │ └── copyright_logo.ico │ ├── js │ └── 404.js │ └── style.scss ├── dots ├── 404.html ├── css │ └── styles.css └── js │ └── animate.js ├── fire ├── 404.html ├── app.js └── styles.css ├── fireworks ├── 404.html ├── css │ └── 404.css └── js │ └── 404.js ├── flower ├── 404.html ├── css │ └── 404.css └── js │ └── 404.js ├── galaxy ├── 404.html ├── css │ └── 404.css ├── image │ └── astroid.png └── js │ └── 404.js ├── glitch ├── 404.html ├── css │ └── 404.css └── js │ └── 404.js ├── hexagon ├── 404.html ├── script.js └── style.css ├── images └── tsParticles-64.png ├── imposter ├── 404.html ├── css │ └── 404.css └── js │ └── 404.js ├── index.html ├── jitter ├── 404.html ├── app.js └── styles.css ├── js └── main.js ├── links ├── 404.html ├── css │ └── style.css └── js │ └── 404.js ├── masked ├── 404.html ├── css │ └── 404.css ├── images │ └── background.jpg └── js │ └── 404.js ├── matrix-revolutions ├── 404.html ├── css │ └── 404.css └── js │ └── 404.js ├── matrix ├── 404.html ├── css │ └── 404.css └── js │ └── 404.js ├── nord ├── 404.html ├── assets │ ├── compass.svg │ └── routes.svg ├── index.css └── index.js ├── ocean ├── 404.html ├── images │ └── underwater.jpg ├── scripts │ └── particles.js └── styles │ └── 404.css ├── package-lock.json ├── package.json ├── party ├── 404.html ├── images │ ├── Dance-1.gif │ ├── Dance-2.gif │ ├── Dance-3.gif │ └── Dance-4.gif ├── script.js └── style.css ├── playful ├── 404.html ├── css │ └── 404.css └── js │ └── 404.js ├── pole ├── 404.html ├── css │ └── 404.css ├── image │ ├── fish-svgrepo-com (1).svg │ ├── fish-svgrepo-com (10).svg │ ├── fish-svgrepo-com (11).svg │ ├── fish-svgrepo-com (12).svg │ ├── fish-svgrepo-com (13).svg │ ├── fish-svgrepo-com (14).svg │ ├── fish-svgrepo-com (2).svg │ ├── fish-svgrepo-com (3).svg │ ├── fish-svgrepo-com (4).svg │ ├── fish-svgrepo-com (5).svg │ ├── fish-svgrepo-com (6).svg │ ├── fish-svgrepo-com (7).svg │ ├── fish-svgrepo-com (8).svg │ ├── fish-svgrepo-com (9).svg │ ├── fish-svgrepo-com.svg │ ├── sun-svgrepo-com.svg │ └── truck-svgrepo-com.svg └── js │ └── 404.js ├── polygon ├── 404.html ├── css │ └── 404.css ├── images │ └── 404.svg └── js │ └── 404.js ├── renovate.json ├── restriction ├── 404.html ├── css │ └── 404.css └── js │ └── 404.js ├── simple ├── 400.html ├── 401.html ├── 403.html ├── 404.html ├── 500.html ├── css │ └── errors.css └── js │ └── errors.js ├── snowfall ├── 404.html ├── css │ └── app.css ├── images │ ├── cat.svg │ ├── cup.svg │ └── starburst_white_300_drop_2.png └── js │ └── app.js ├── space ├── 404.html ├── css │ └── 404.css ├── images │ ├── astronaut.svg │ └── planet.svg └── js │ └── 404.js ├── spooky ├── 404.html ├── css │ └── 404.css └── js │ └── 404.js ├── starwars ├── 404.html ├── css │ └── style.css ├── image │ ├── deadstar.png │ ├── ship1.png │ ├── ship2.png │ └── ship3.png └── js │ └── script.js ├── sweep.yaml ├── traveller ├── 404.html ├── css │ └── 404.css └── js │ └── 404.js └── wholesome ├── 404.html ├── css └── app.css └── js └── app.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | globals: { 7 | tsParticles: "readonly", 8 | $: "readonly", 9 | loadFirePreset: "readonly", 10 | loadFireworksPreset: "readonly", 11 | loadPolygonPath: "readonly", 12 | dataLayer: "readonly", 13 | }, 14 | extends: ["standard", "eslint:recommended", "plugin:prettier/recommended"], 15 | overrides: [ 16 | { 17 | env: { 18 | node: true, 19 | }, 20 | files: [".eslintrc.{js,cjs}"], 21 | parserOptions: { 22 | sourceType: "script", 23 | }, 24 | }, 25 | ], 26 | parserOptions: { 27 | ecmaVersion: "latest", 28 | }, 29 | plugins: ["html", "prettier", "import", "n", "promise"], 30 | settings: { 31 | "html/html-extensions": [".html", ".we"], // consider .html and .we files as HTML 32 | "html/report-bad-indent": "error", 33 | }, 34 | rules: {}, 35 | }; 36 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: Bug Report 2 | description: File a bug report 3 | title: "[Bug]: " 4 | labels: [bug, triage] 5 | assignees: 6 | - matteobruni 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to fill out this bug report! 12 | - type: input 13 | id: contact 14 | attributes: 15 | label: Contact Details 16 | description: How can we get in touch with you if we need more info? 17 | placeholder: ex. email@example.com 18 | validations: 19 | required: false 20 | - type: textarea 21 | id: what-happened 22 | attributes: 23 | label: What happened? 24 | description: Also tell us, what did you expect to happen? 25 | placeholder: Tell us what you see! 26 | value: "A bug happened!" 27 | validations: 28 | required: true 29 | - type: textarea 30 | id: template 31 | attributes: 32 | label: 404 Template 33 | description: Specify which is the 404 template where you're having an issue 34 | placeholder: The 404 template name 35 | validations: 36 | required: false 37 | - type: dropdown 38 | id: browsers 39 | attributes: 40 | label: What browsers are you seeing the problem on? 41 | multiple: true 42 | options: 43 | - Firefox 44 | - Chrome 45 | - Safari 46 | - Microsoft Edge 47 | - type: textarea 48 | id: logs 49 | attributes: 50 | label: Relevant log output 51 | description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks. 52 | render: shell 53 | - type: checkboxes 54 | id: terms 55 | attributes: 56 | label: Code of Conduct 57 | description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/matteobruni/tsparticles/blob/main/CODE_OF_CONDUCT.md) 58 | options: 59 | - label: I agree to follow this project's Code of Conduct 60 | required: true -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Add more templates issue 4 | url: https://github.com/tsparticles/404-templates/issues/97 5 | about: All other issues proposing new templates will be closed 6 | - name: Official tsParticles Repository 7 | url: https://github.com/matteobruni/tsparticles 8 | about: The official tsParticles GitHub Repository, where you can ask support about tsParticles library. 9 | - name: Official tsParticles Slack 10 | url: https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI 11 | about: The official Slack offers more direct support. 12 | - name: Official tsParticles Discord 13 | url: https://discord.com/invite/hACwv45Hme 14 | about: The official Discord offers more direct support. 15 | - name: Official tsParticles Telegram 16 | url: https://t.me/tsparticles 17 | about: The official Telegram offers more direct support. 18 | - name: Official tsParticles Reddit 19 | url: https://www.reddit.com/r/tsParticles/ 20 | about: The official Reddit offers more direct support. 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 2 | description: Tell us more about your feature request, new templates request will be not accepted. There's a dedicated issue for that. 3 | title: "Feature Request" 4 | labels: [feature_request, triage] 5 | assignees: 6 | - matteobruni 7 | body: 8 | - type: markdown 9 | attributes: 10 | value: | 11 | Thanks for taking the time to fill out this feature request! 12 | If you want to propose a new template, please check the dedicated issue [here](https://github.com/tsparticles/404-templates/issues/18) 13 | - type: input 14 | id: contact 15 | attributes: 16 | label: Contact Details 17 | description: How can we get in touch with you if we need more info? 18 | placeholder: ex. email@example.com 19 | validations: 20 | required: false 21 | - type: textarea 22 | id: request 23 | attributes: 24 | label: What is your request? 25 | description: Also tell us, what did you expect to happen? 26 | placeholder: Tell us what you want to request! 27 | value: "A new feature came to my mind!" 28 | validations: 29 | required: true 30 | - type: checkboxes 31 | id: terms 32 | attributes: 33 | label: Code of Conduct 34 | description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/matteobruni/tsparticles/blob/main/CODE_OF_CONDUCT.md) 35 | options: 36 | - label: I agree to follow this project's Code of Conduct 37 | required: true -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/sweep-fast-template.yml: -------------------------------------------------------------------------------- 1 | name: Sweep Fast Issue 2 | title: 'Sweep (fast): ' 3 | description: For few-line fixes to be handled by Sweep, an AI-powered junior developer. Sweep will use GPT-3.5 to quickly create a PR for very small changes. 4 | labels: sweep 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: Details 10 | description: Tell Sweep where and what to edit and provide enough context for a new developer to the codebase 11 | placeholder: | 12 | Bugs: The bug might be in ... file. Here are the logs: ... 13 | Features: the new endpoint should use the ... class from ... file because it contains ... logic. 14 | Refactors: We are migrating this function to ... version because ... 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/sweep-slow-template.yml: -------------------------------------------------------------------------------- 1 | name: Sweep Slow Issue 2 | title: 'Sweep (slow): ' 3 | description: For larger bugs, features, refactors, and tests to be handled by Sweep, an AI-powered junior developer. Sweep will perform a deeper search and more self-reviews but will take longer. 4 | labels: sweep 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: Details 10 | description: Tell Sweep where and what to edit and provide enough context for a new developer to the codebase 11 | placeholder: | 12 | Bugs: The bug might be in ... file. Here are the logs: ... 13 | Features: the new endpoint should use the ... class from ... file because it contains ... logic. 14 | Refactors: We are migrating this function to ... version because ... 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/sweep-template.yml: -------------------------------------------------------------------------------- 1 | name: Sweep Issue 2 | title: 'Sweep: ' 3 | description: For small bugs, features, refactors, and tests to be handled by Sweep, an AI-powered junior developer. 4 | labels: sweep 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: Details 10 | description: Tell Sweep where and what to edit and provide enough context for a new developer to the codebase 11 | placeholder: | 12 | Bugs: The bug might be in ... file. Here are the logs: ... 13 | Features: the new endpoint should use the ... class from ... file because it contains ... logic. 14 | Refactors: We are migrating this function to ... version because ... 15 | -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node 2 | # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: ["main", "dev"] 9 | pull_request: 10 | branches: ["main", "dev"] 11 | 12 | jobs: 13 | build: 14 | runs-on: ubuntu-latest 15 | 16 | strategy: 17 | matrix: 18 | node-version: [16.x, 18.x, 20.x] 19 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 20 | 21 | steps: 22 | - uses: actions/checkout@v4 23 | - name: Use Node.js ${{ matrix.node-version }} 24 | uses: actions/setup-node@v4 25 | with: 26 | node-version: ${{ matrix.node-version }} 27 | cache: "npm" 28 | - run: npm ci 29 | - run: npm run build:ci 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | .DS_Store 106 | .idea 107 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/.prettierignore -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guideline 2 | 3 | ## How do I make a contribution to this project? 4 | 5 | Never made an open source contribution before? Wondering how contributions work in the in our project? Here's a quick rundown! 6 | 7 | ## **Here's a quick rundown on how to make a contribution to my project:** 8 | 9 | --- 10 | 11 | 1. Find an issue that you are interested in addressing or a feature that you would like to add. 12 | 13 | 2. Fork the repository associated with the issue to your local GitHub organization. This means that you will have a copy of the repository `underyour-GitHub-username/repository-name.` 14 | 15 | 3. Clone the repository to your local machine using: 16 | 17 | ``` 18 | git clone https://github.com/github-username/404-templates.git 19 | ``` 20 | 21 | 4. Add the upstream remote: 22 | 23 | ``` 24 | git remote add upstream https://github.com/tsparticles/404-templates.git 25 | ``` 26 | 27 | 5. Pull the latest changes from the main repository if you think your fork is behind: 28 | 29 | ``` 30 | git pull upstream main 31 | ``` 32 | 33 | 6. Create a new branch and switch to it for your issue fix or feature using: 34 | 35 | ``` 36 | git switch -c branch-name-here 37 | ``` 38 | 39 | 7. Make the appropriate changes for the issue you are trying to address or the feature that you want to add 40 | 41 | 8. Add the changes to the staging are and commit them to the branch you are working on 42 | 43 | 9. Push the changes to the remote repository using: 44 | 45 | ``` 46 | git push origin branch-name-here 47 | ``` 48 | 49 | 10. Submit a **pull request** to the upstream repository 50 | 51 | 11. Title the **pull request** with a short description of the changes made 52 | 53 | 12. Wait for the pull request to be reviewed by a maintainer 54 | 55 | 13. Make changes to the pull request if the reviewing maintainer recommends them 56 | 57 | 14. Celebrate your success after your pull request is merged! 58 | 59 | --- 60 | 61 | ### WE APPRECIATE YOUR CONTRIBUTION! ❤️ 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 tsParticles 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tsParticles 404 Templates 2 | 3 | tsParticles used in various 404 Pages for Websites 4 | 5 | ## 404 Masked Page Preview 6 | 7 | [![masked 404](https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/masked.png?raw=true)](https://tsparticles.github.io/404-templates/masked/404.html) 8 | 9 | See working preview [here](https://tsparticles.github.io/404-templates/masked/404.html) 10 | 11 | ## 404 Simple Page Preview 12 | 13 | [![simple 404](https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/simple.png?raw=true)](https://tsparticles.github.io/404-templates/simple/404.html) 14 | 15 | See working preview [here](https://tsparticles.github.io/404-templates/simple/404.html) 16 | 17 | ## 404 Space Page Preview 18 | 19 | [![space 404](https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/space.png?raw=true)](https://tsparticles.github.io/404-templates/space/404.html) 20 | 21 | See working preview [here](https://tsparticles.github.io/404-templates/space/404.html) 22 | 23 | ## What is tsParticles 24 | 25 | [tsParticles](https://github.com/matteobruni/tsparticles) is a lightweight library for easily creating particles animations in your websites or web applications. 26 | 27 | The [tsParticles](https://github.com/matteobruni/tsparticles) library is ready to be used in standard JavaScript, React, Vue.js, Angular, Svelte, jQuery, Preact, Inferno. 28 | 29 | Want to see more particles demos? [Checkout this collection](https://codepen.io/collection/DPOage) 30 | 31 | Want to see more templates or want to share yours? [Checkout this README](https://github.com/tsparticles/templates) 32 | -------------------------------------------------------------------------------- /__screenshots/autumn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/autumn.png -------------------------------------------------------------------------------- /__screenshots/bee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/bee.png -------------------------------------------------------------------------------- /__screenshots/burning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/burning.png -------------------------------------------------------------------------------- /__screenshots/controller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/controller.png -------------------------------------------------------------------------------- /__screenshots/desert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/desert.png -------------------------------------------------------------------------------- /__screenshots/dots.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/dots.png -------------------------------------------------------------------------------- /__screenshots/fire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/fire.png -------------------------------------------------------------------------------- /__screenshots/fireworks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/fireworks.png -------------------------------------------------------------------------------- /__screenshots/flower.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/flower.png -------------------------------------------------------------------------------- /__screenshots/galaxy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/galaxy.png -------------------------------------------------------------------------------- /__screenshots/glitch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/glitch.png -------------------------------------------------------------------------------- /__screenshots/hexagon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/hexagon.png -------------------------------------------------------------------------------- /__screenshots/imposter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/imposter.png -------------------------------------------------------------------------------- /__screenshots/jitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/jitter.png -------------------------------------------------------------------------------- /__screenshots/links.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/links.png -------------------------------------------------------------------------------- /__screenshots/masked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/masked.png -------------------------------------------------------------------------------- /__screenshots/matrix-revolutions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/matrix-revolutions.png -------------------------------------------------------------------------------- /__screenshots/matrix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/matrix.png -------------------------------------------------------------------------------- /__screenshots/nord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/nord.png -------------------------------------------------------------------------------- /__screenshots/ocean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/ocean.png -------------------------------------------------------------------------------- /__screenshots/party.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/party.png -------------------------------------------------------------------------------- /__screenshots/playful.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/playful.png -------------------------------------------------------------------------------- /__screenshots/pole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/pole.png -------------------------------------------------------------------------------- /__screenshots/polygon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/polygon.png -------------------------------------------------------------------------------- /__screenshots/restriction.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/restriction.png -------------------------------------------------------------------------------- /__screenshots/simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/simple.png -------------------------------------------------------------------------------- /__screenshots/snowfall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/snowfall.png -------------------------------------------------------------------------------- /__screenshots/space.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/space.png -------------------------------------------------------------------------------- /__screenshots/spooky.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/spooky.png -------------------------------------------------------------------------------- /__screenshots/starwars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/starwars.png -------------------------------------------------------------------------------- /__screenshots/traveller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/traveller.png -------------------------------------------------------------------------------- /__screenshots/wholesome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/__screenshots/wholesome.png -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /autumn/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | Autumn | tsParticles 404 23 | 24 | Autumn 404 25 | 26 | 27 | 28 |
29 |
30 | 31 |
32 | 33 |

404

34 |

Uh-oh, page not found :(

35 | 36 |
37 |
38 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /autumn/images/autumn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/autumn/images/autumn.jpg -------------------------------------------------------------------------------- /autumn/images/pumpkin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/autumn/images/pumpkin.png -------------------------------------------------------------------------------- /autumn/scripts/404.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | fpsLimit: 60, 3 | fullScreen: { 4 | enable: true, 5 | }, 6 | interactivity: { 7 | detectsOn: "window", 8 | events: { 9 | resize: true, 10 | onHover: { 11 | enable: true, 12 | mode: "bubble", 13 | }, 14 | }, 15 | modes: { 16 | bubble: { distance: 100, duration: 2, opacity: 1, size: 40, speed: 3 }, 17 | grab: { distance: 400, links: { opacity: 1 } }, 18 | push: { quantity: 4 }, 19 | remove: { quantity: 2 }, 20 | repulse: { distance: 200, duration: 0.4 }, 21 | }, 22 | }, 23 | particles: { 24 | color: { value: "random" }, 25 | links: { 26 | color: "random", 27 | distance: 150, 28 | enable: false, 29 | opacity: 1, 30 | width: 1, 31 | }, 32 | move: { 33 | attract: { enable: false, rotateX: 600, rotateY: 1200 }, 34 | bounce: false, 35 | direction: "none", 36 | enable: true, 37 | out_mode: "out", 38 | random: false, 39 | speed: 3, 40 | straight: false, 41 | }, 42 | rotate: { 43 | animation: { 44 | enable: true, 45 | speed: 10, 46 | sync: false, 47 | }, 48 | }, 49 | number: { density: { enable: true, area: 800 }, value: 100 }, 50 | opacity: { 51 | animation: { enable: true, minimumValue: 1, speed: 1, sync: false }, 52 | random: false, 53 | value: 1, 54 | }, 55 | shape: { 56 | character: [ 57 | { 58 | fill: true, 59 | font: "Verdana", 60 | value: ["🍂", "🍁"], 61 | style: "", 62 | weight: 400, 63 | }, 64 | ], 65 | image: { 66 | height: 100, 67 | replace_color: true, 68 | src: "images/github.svg", 69 | width: 100, 70 | }, 71 | polygon: { nb_sides: 5 }, 72 | stroke: { color: "random", width: 1 }, 73 | type: "char", 74 | }, 75 | size: { 76 | anim: { enable: true, minimumValue: 8, speed: 20, sync: false }, 77 | random: { minimumValue: 8, enable: true }, 78 | value: 32, 79 | }, 80 | }, 81 | detectRetina: true, 82 | }); 83 | -------------------------------------------------------------------------------- /autumn/styles/404.css: -------------------------------------------------------------------------------- 1 | #tsparticles { 2 | position: fixed !important; 3 | opacity: 0.9; 4 | height: 100vh; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | font-family: "Work Sans", apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 10 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 11 | } 12 | 13 | h3 { 14 | text-shadow: white 1px 0 10px; 15 | } 16 | 17 | .container { 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | height: 100vh; 22 | opacity: 0.95; 23 | background-image: linear-gradient( 24 | 90deg, 25 | rgba(0, 0, 0, 0.7) 0%, 26 | rgba(255, 255, 255, 0.2) 100% 27 | ), 28 | url("/autumn/images/autumn.jpg"); 29 | background-size: cover; 30 | background-position: center; 31 | background-repeat: no-repeat; 32 | } 33 | 34 | .container a { 35 | text-decoration: none; 36 | } 37 | 38 | .wrapper { 39 | max-width: 390px; 40 | width: 100%; 41 | height: 390px; 42 | display: block; 43 | margin: 0 auto; 44 | position: relative; 45 | margin-top: 8vh; 46 | } 47 | 48 | .container h1 { 49 | color: #000; 50 | margin-bottom: 0px; 51 | font-weight: 800; 52 | font-family: "Arial", display; 53 | font-size: 8rem; 54 | text-align: center; 55 | text-shadow: 56 | 1px 1px 0px #eb452b, 57 | 3px 3px 0px #f99913, 58 | 4px 4px 0px #fff, 59 | white 1px 0 10px; 60 | } 61 | 62 | .container h3 { 63 | text-align: center; 64 | color: #fff; 65 | text-shadow: 66 | 1px 1px 0px #eb452b, 67 | 1.5px 1.5px 0px #f99913; 68 | font-size: 20px; 69 | line-height: 23px; 70 | max-width: 330px; 71 | margin: 0px auto 30px auto; 72 | font-weight: 400; 73 | } 74 | 75 | .container h3 span { 76 | position: relative; 77 | width: 65px; 78 | display: inline-block; 79 | } 80 | 81 | .container h3 span:after { 82 | content: ""; 83 | border-bottom: 2px solid #efa032; 84 | position: absolute; 85 | } 86 | 87 | button { 88 | font-family: inherit; 89 | } 90 | 91 | .link { 92 | background: none; 93 | padding: 12px 0px 10px 0px; 94 | border: 2px solid #fff; 95 | width: 150px; 96 | font-size: 15px; 97 | text-align: center; 98 | margin: 0 auto; 99 | display: block; 100 | margin-bottom: 40px; 101 | margin-top: 25px; 102 | font-weight: 700; 103 | margin: auto; 104 | color: #fff; 105 | top: 0; 106 | bottom: 0; 107 | left: 0; 108 | right: 0; 109 | cursor: pointer; 110 | overflow: hidden; 111 | border-radius: 5px; 112 | box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.5); 113 | } 114 | 115 | .link:hover { 116 | color: #ffa600; 117 | border-color: #ffa600; 118 | cursor: pointer; 119 | opacity: 1; 120 | background-color: rgb(220, 37, 0); 121 | } 122 | 123 | img { 124 | width: 30%; 125 | height: 30%; 126 | position: absolute; 127 | top: -5%; 128 | left: 35%; 129 | z-index: 1; 130 | filter: brightness(120%); 131 | filter: contrast(120%); 132 | filter: drop-shadow(3px 3px 3px black); 133 | transition: opacity 0.5s ease-in-out; 134 | } 135 | 136 | img:hover { 137 | width: 32%; 138 | height: 32%; 139 | } 140 | -------------------------------------------------------------------------------- /bee/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | Bees | tsParticles 404 20 | 21 | 25 | 26 | 27 | 28 |
29 | 30 |
31 |
32 |

404.

33 |

Ours bee try to search but...

34 |
35 |

PAGE NOT FOUND

36 | 37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /bee/css/app.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Dosis:300,400,700,800"); 2 | html { 3 | height: 100%; 4 | overflow: hidden; 5 | } 6 | 7 | body { 8 | background: #fcc53f; 9 | font-family: "Dosis", sans-serif; 10 | height: calc(100%); 11 | overflow: auto; 12 | position: relative; 13 | text-align: center; 14 | } 15 | 16 | #tsparticles { 17 | width: 100%; 18 | height: 100%; 19 | position: absolute; 20 | z-index: -1; 21 | } 22 | 23 | .cont { 24 | width: 100%; 25 | height: auto; 26 | margin-top: 4rem; 27 | } 28 | h2 { 29 | color: rgb(255, 255, 255); 30 | font-size: 150px; 31 | margin-bottom: 0rem; 32 | } 33 | 34 | h3 { 35 | color: rgb(46, 46, 46); 36 | font-size: 60px; 37 | opacity: 100%; 38 | } 39 | p { 40 | color: rgb(255, 255, 255); 41 | font-size: 24px; 42 | margin-top: 0rem; 43 | } 44 | 45 | a { 46 | text-decoration: none; 47 | } 48 | .button { 49 | background-color: #fcc53f; 50 | color: #000; 51 | padding: 12px 0px 10px 0px; 52 | border: 3px solid rgb(0, 0, 0); 53 | outline: none; 54 | border-radius: 7px; 55 | width: 150px; 56 | font-size: 15px; 57 | text-align: center; 58 | margin: 0 auto; 59 | vertical-align: middle; 60 | display: block; 61 | margin-bottom: 40px; 62 | margin-top: 25px; 63 | font-family: "Dosis", sans-serif; 64 | font-weight: 400; 65 | } 66 | 67 | .button:hover { 68 | color: #fff; 69 | border-color: #fff; 70 | 71 | cursor: pointer; 72 | opacity: 1; 73 | } 74 | -------------------------------------------------------------------------------- /bee/images/bee_dx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/bee/images/bee_dx.png -------------------------------------------------------------------------------- /bee/images/bee_sx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/bee/images/bee_sx.png -------------------------------------------------------------------------------- /bee/js/app.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | particles: { 3 | number: { 4 | value: 350, 5 | limit: 0, 6 | density: { 7 | enable: false, 8 | value_area: 600, 9 | }, 10 | }, 11 | color: { 12 | value: "#ffffff", 13 | }, 14 | shape: { 15 | type: "image", 16 | stroke: { 17 | width: 2, 18 | color: "#fff", 19 | }, 20 | polygon: { 21 | nb_sides: 6, 22 | }, 23 | image: [ 24 | { 25 | src: "images/bee_sx.png", 26 | width: 64, 27 | height: 64, 28 | }, 29 | { 30 | src: "images/bee_dx.png", 31 | width: 64, 32 | height: 64, 33 | }, 34 | ], 35 | images: [ 36 | { 37 | src: "images/bee_sx.png", 38 | width: 64, 39 | height: 64, 40 | }, 41 | { 42 | src: "images/bee_dx.png", 43 | width: 64, 44 | height: 64, 45 | }, 46 | ], 47 | }, 48 | opacity: { 49 | value: 1, 50 | random: false, 51 | anim: { 52 | enable: false, 53 | speed: 2, 54 | opacity_min: 0.2, 55 | sync: false, 56 | }, 57 | }, 58 | size: { 59 | value: 16, 60 | random: false, 61 | anim: { 62 | enable: false, 63 | speed: 20, 64 | size_min: 32, 65 | sync: false, 66 | }, 67 | }, 68 | line_linked: { 69 | enable: false, 70 | distance: 50, 71 | color: "#ffffff", 72 | opacity: 0.5, 73 | width: 1, 74 | }, 75 | move: { 76 | enable: true, 77 | speed: 5, 78 | direction: "none", 79 | random: true, 80 | straight: false, 81 | outModes: { 82 | default: "bounce", 83 | top: "bounce", 84 | left: "bounce", 85 | right: "bounce", 86 | bottom: "bounce", 87 | }, 88 | bounce: false, 89 | attract: { 90 | enable: true, 91 | rotateX: 250, 92 | rotateY: 1000, 93 | }, 94 | }, 95 | }, 96 | interactivity: { 97 | detect_on: "canvas", 98 | events: { 99 | onhover: { 100 | enable: true, 101 | mode: "bubble", 102 | }, 103 | onclick: { 104 | enable: true, 105 | mode: "repulse", 106 | }, 107 | resize: true, 108 | }, 109 | modes: { 110 | grab: { 111 | distance: 125, 112 | line_linked: { 113 | opacity: 1, 114 | }, 115 | }, 116 | bubble: { 117 | distance: 200, 118 | size: 33, 119 | duration: 2, 120 | opacity: 6, 121 | speed: 2, 122 | }, 123 | repulse: { 124 | distance: 200, 125 | duration: 0.25, 126 | }, 127 | push: { 128 | particles_nb: 4, 129 | }, 130 | remove: { 131 | particles_nb: 2, 132 | }, 133 | }, 134 | }, 135 | retina_detect: true, 136 | }); 137 | -------------------------------------------------------------------------------- /burning/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | Burning | tsParticles 404 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 |

404

30 |

Page Not Found

31 |
32 | Return to Home 33 |
34 |
35 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /burning/script.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | fpsLimit: 60, 3 | particles: { 4 | number: { 5 | value: 0, 6 | density: { 7 | enable: true, 8 | value_area: 800, 9 | }, 10 | }, 11 | color: { 12 | value: "#ff0000", 13 | animation: { 14 | enable: true, 15 | speed: 50, 16 | sync: true, 17 | }, 18 | }, 19 | shape: { 20 | type: "circle", 21 | }, 22 | opacity: { 23 | value: 1, 24 | random: false, 25 | animation: { 26 | enable: true, 27 | speed: 0.5, 28 | minimumValue: 0, 29 | sync: false, 30 | }, 31 | }, 32 | size: { 33 | value: 4, 34 | random: { enable: true, minimumValue: 4 }, 35 | animation: { 36 | enable: false, 37 | speed: 20, 38 | minimumValue: 4, 39 | sync: false, 40 | }, 41 | }, 42 | life: { 43 | duration: { 44 | value: 2, 45 | }, 46 | count: 1, 47 | }, 48 | move: { 49 | angle: { 50 | value: 45, 51 | offset: 0, 52 | }, 53 | enable: true, 54 | gravity: { 55 | enable: true, 56 | acceleration: -0.3, 57 | }, 58 | speed: 4, 59 | direction: "top", 60 | random: false, 61 | straight: false, 62 | size: true, 63 | outModes: { 64 | default: "destroy", 65 | bottom: "none", 66 | }, 67 | attract: { 68 | enable: false, 69 | distance: 500, 70 | rotate: { 71 | x: 600, 72 | y: 1200, 73 | }, 74 | }, 75 | }, 76 | }, 77 | interactivity: { 78 | detectsOn: "canvas", 79 | events: { 80 | resize: true, 81 | }, 82 | }, 83 | detectRetina: true, 84 | background: { 85 | color: "#000000", 86 | }, 87 | emitters: { 88 | direction: "top", 89 | rate: { 90 | quantity: 5, 91 | delay: 0.01, 92 | }, 93 | size: { 94 | width: 100, 95 | height: 50, 96 | }, 97 | position: { 98 | x: 50, 99 | y: 100, 100 | }, 101 | }, 102 | }); 103 | -------------------------------------------------------------------------------- /burning/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@800&family=Noto+Serif+Gujarati:wght@500&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | -webkit-text-size-adjust: none; 7 | /* overflow: hidden; */ 8 | } 9 | #tsparticles { 10 | position: fixed; 11 | width: 100%; 12 | height: 100%; 13 | z-index: -1; 14 | } 15 | 16 | .container { 17 | color: white; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | height: 100vh; 22 | flex-direction: column; 23 | } 24 | 25 | #heading { 26 | font-family: "Gemunu Libre", sans-serif; 27 | color: orange; 28 | animation: animate 4s infinite; 29 | font-size: 130px; 30 | } 31 | 32 | #subheading { 33 | font-family: "Noto Serif Gujarati", serif; 34 | } 35 | 36 | @keyframes animate { 37 | 0% { 38 | color: orange; 39 | text-shadow: 40 | 0 0 4px #ff00004f, 41 | 0 0 10px #ff000091, 42 | 0 0 20px #ff0000; 43 | } 44 | 50% { 45 | color: red; 46 | text-shadow: 47 | 0 0 4px rgba(255, 166, 0, 0.277), 48 | 0 0 10px rgba(255, 166, 0, 0.56), 49 | 0 0 20px orange; 50 | } 51 | 100% { 52 | color: orange; 53 | text-shadow: 54 | 0 0 4px #ff00004f, 55 | 0 0 10px #ff000091, 56 | 0 0 20px #ff0000; 57 | } 58 | } 59 | 60 | .button { 61 | background: transparent; 62 | padding: 5px 10px; 63 | border-radius: 5px; 64 | margin-top: 80px; 65 | border: 1px solid rgb(255, 89, 0); 66 | } 67 | .button a { 68 | color: red; 69 | text-decoration: none; 70 | font-family: "Noto Serif Gujarati", serif; 71 | } 72 | 73 | .button:hover { 74 | background: rgb(255, 89, 0); 75 | } 76 | .button a:hover { 77 | color: yellow; 78 | } 79 | -------------------------------------------------------------------------------- /controller/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | Controller | tsParticles 404 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |
28 |

404

29 |

🎮 You're out of bounds! Return?

30 |
31 |
32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /controller/images/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/controller/images/circle.png -------------------------------------------------------------------------------- /controller/images/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/controller/images/cross.png -------------------------------------------------------------------------------- /controller/images/square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/controller/images/square.png -------------------------------------------------------------------------------- /controller/images/triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/controller/images/triangle.png -------------------------------------------------------------------------------- /controller/script.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | fullScreen: { 3 | enable: true, 4 | zIndex: 0, 5 | }, 6 | particles: { 7 | reduceDuplicates: true, 8 | move: { 9 | enable: true, 10 | bounce: false, 11 | direction: "top", 12 | outModes: "out", 13 | straight: false, 14 | random: true, 15 | angle: 45, 16 | speed: { 17 | min: 2, 18 | max: 7, 19 | }, 20 | gravity: { 21 | enable: true, 22 | inverse: true, 23 | acceleration: { 24 | min: 1, 25 | max: 2, 26 | }, 27 | maxSpeed: { 28 | min: 2, 29 | max: 7, 30 | }, 31 | }, 32 | }, 33 | rotate: { 34 | value: { 35 | min: 0, 36 | max: 360, 37 | }, 38 | animation: { 39 | enable: true, 40 | speed: { 41 | min: 2, 42 | max: 5, 43 | }, 44 | }, 45 | }, 46 | number: { 47 | limit: 8, 48 | }, 49 | opacity: { 50 | value: 1, 51 | }, 52 | size: { 53 | value: { 54 | min: 15, 55 | max: 35, 56 | }, 57 | }, 58 | shape: { 59 | type: "images", 60 | options: { 61 | images: [ 62 | { 63 | src: "images/circle.png", 64 | width: 1024, 65 | height: 853, 66 | }, 67 | { 68 | src: "images/cross.png", 69 | width: 1024, 70 | height: 853, 71 | }, 72 | { 73 | src: "images/square.png", 74 | width: 1024, 75 | height: 853, 76 | }, 77 | { 78 | src: "images/triangle.png", 79 | width: 1024, 80 | height: 853, 81 | }, 82 | ], 83 | }, 84 | }, 85 | }, 86 | }); 87 | -------------------------------------------------------------------------------- /controller/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #000000; 3 | font-family: Arial, Helvetica, sans-serif; 4 | height: 100vh; 5 | z-index: -999; 6 | overflow: hidden; 7 | } 8 | 9 | #backdrop { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | width: 100%; 14 | height: 100%; 15 | backdrop-filter: blur(3px); 16 | z-index: 1; 17 | color: #ffffff; 18 | } 19 | 20 | #text { 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | flex-direction: column; 25 | } 26 | 27 | h1 { 28 | background-color: #ffffff; 29 | font-size: 12rem; 30 | margin: 0; 31 | padding: 0; 32 | background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%); 33 | -webkit-background-clip: text; 34 | -moz-background-clip: text; 35 | -webkit-text-fill-color: transparent; 36 | -moz-text-fill-color: transparent; 37 | } 38 | 39 | p { 40 | font-size: 2rem; 41 | margin: 0; 42 | padding: 0; 43 | } 44 | 45 | a { 46 | color: #ffffff; 47 | text-decoration: underline; 48 | } 49 | 50 | a:visited { 51 | color: rgb(104, 104, 104); 52 | } 53 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | padding-top: 3rem; 3 | padding-bottom: 3rem; 4 | margin-bottom: 0; 5 | background-color: #fff; 6 | } 7 | 8 | @media (min-width: 768px) { 9 | .jumbotron { 10 | padding-top: 6rem; 11 | padding-bottom: 6rem; 12 | } 13 | } 14 | 15 | .jumbotron p:last-child { 16 | margin-bottom: 0; 17 | } 18 | 19 | .jumbotron h1 { 20 | font-weight: 300; 21 | } 22 | 23 | .jumbotron .container { 24 | max-width: 40rem; 25 | } 26 | 27 | footer { 28 | padding-top: 3rem; 29 | padding-bottom: 3rem; 30 | } 31 | 32 | footer p { 33 | margin-bottom: 0.25rem; 34 | } 35 | 36 | @media (prefers-color-scheme: dark) { 37 | body, 38 | .jumbotron { 39 | background-color: #0d1117; 40 | color: #c9d1d9; 41 | } 42 | 43 | .jumbotron p:last-child { 44 | color: #94a4b5 !important; 45 | } 46 | 47 | a { 48 | color: #58a6ff; 49 | } 50 | 51 | .bg-light { 52 | background-color: #161b22 !important; 53 | } 54 | 55 | .card { 56 | background: #0d1117; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /desert/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | 28 | 29 | 30 | 31 | 36 | 37 | Desert 404 | tsParticles 38 | 39 | 40 | 41 |
42 | 43 |
44 |
45 |

404

46 |

Oops! Lost in the desert

47 | Back to Home 48 |
49 |
50 | 51 | 56 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /desert/assets/css/style.min.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | overflow: hidden; 5 | } 6 | body { 7 | position: relative; 8 | } 9 | .intro { 10 | height: 100vh; 11 | background: url("../images/background.jpg"); 12 | background-repeat: no-repeat; 13 | background-position: bottom center; 14 | background-size: cover; 15 | display: flex; 16 | } 17 | .intro .content { 18 | display: flex; 19 | flex-direction: column; 20 | justify-content: center; 21 | align-items: center; 22 | text-align: center; 23 | } 24 | .intro .content h1 { 25 | font-size: 16rem; 26 | font-weight: bold; 27 | text-shadow: 28 | -1px -1px #a7a7a7, 29 | 1px 1px #a7a7a7, 30 | 2px 2px #a7a7a7, 31 | 3px 3px #a7a7a7, 32 | 4px 4px #a7a7a7, 33 | 5px 5px #a7a7a7, 34 | 6px 6px #a7a7a7; 35 | animation: float 6s ease-in-out infinite; 36 | } 37 | @keyframes float { 38 | 0% { 39 | transform: translatey(0px); 40 | } 41 | 50% { 42 | transform: translatey(-20px); 43 | } 44 | 100% { 45 | transform: translatey(0px); 46 | } 47 | } 48 | .intro .content h2 { 49 | font-weight: 400; 50 | font-size: 3rem; 51 | text-transform: uppercase; 52 | -webkit-text-stroke: 1px #a7a7a7; 53 | } 54 | .intro .content a { 55 | text-transform: uppercase; 56 | border-radius: 10px; 57 | box-shadow: 58 | 12px 12px 16px 0 rgba(0, 0, 0, 0.25), 59 | -8px -8px 12px 0 rgba(255, 255, 255, 0.3); 60 | } 61 | .intro .content a:hover { 62 | transform: scale(1.1); 63 | } 64 | @media (max-width: 991px) { 65 | .intro .content h1 { 66 | font-size: 12rem; 67 | } 68 | .intro .content h2 { 69 | font-size: 2.5rem; 70 | } 71 | } 72 | @media (max-width: 767px) { 73 | .intro .content h1 { 74 | font-size: 9rem; 75 | } 76 | .intro .content h2 { 77 | font-size: 2rem; 78 | } 79 | } 80 | @media (min-width: 1200px) { 81 | .intro .content h1 { 82 | font-size: 18rem; 83 | } 84 | .intro .content h2 { 85 | font-size: 4rem; 86 | } 87 | } 88 | .copyright { 89 | position: absolute; 90 | bottom: 0; 91 | right: 0; 92 | color: white; 93 | } 94 | -------------------------------------------------------------------------------- /desert/assets/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/desert/assets/images/background.jpg -------------------------------------------------------------------------------- /desert/assets/images/copyright_logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/desert/assets/images/copyright_logo.ico -------------------------------------------------------------------------------- /desert/assets/js/404.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | fpsLimit: 60, 3 | particles: { 4 | // The color of the particles/snowflakes 5 | color: { 6 | value: "#fff", 7 | animation: { 8 | enable: true, 9 | speed: 2, 10 | sync: true, 11 | }, 12 | }, 13 | // Move the snow flakes to bottom for a realistic effect, "out" in outModes is for making them reappear on top once exited at the bottom of the page, the speed should be slow for a realistic effect 14 | move: { 15 | direction: "bottom-right", 16 | enable: true, 17 | outModes: "out", 18 | speed: 10, 19 | }, 20 | // How many particles/snowflakes will be created when starting the effect, density is a good option to enable since it calculates the particles number based on the screen size (mobile users will be happy) 21 | number: { 22 | density: { 23 | enable: true, 24 | area: 800, 25 | }, 26 | value: 500, 27 | }, 28 | // The opacity of the particles/snowflakes 29 | opacity: { 30 | value: 1, 31 | }, 32 | // The shape of the particles/snowflakes, also custom shapes can be used, this will be discussed at the end 33 | shape: { 34 | type: "circle", 35 | }, 36 | // The size of the particles/snowflakes 37 | size: { 38 | value: 2, 39 | }, 40 | // A nice wobble movement 41 | wobble: { 42 | enable: true, 43 | distance: 10, 44 | speed: 10, 45 | }, 46 | // Some depth to the effect, (the layers count by default is 100, changing max here is not affecting that count) 47 | // The zIndex will affect speed, size and opacity of the particles/snowflakes, the smaller the zIndex the smaller/more transparent/slower the particles/snowflakes will be 48 | zIndex: { 49 | value: { 50 | min: 0, 51 | max: 100, 52 | }, 53 | }, 54 | }, 55 | detectRetina: true, 56 | }); 57 | -------------------------------------------------------------------------------- /desert/assets/style.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | overflow: hidden; 5 | } 6 | 7 | body { 8 | position: relative; 9 | } 10 | /* ---- tsparticles container ---- */ 11 | #tsparticles { 12 | position: fixed; 13 | width: 100%; 14 | height: 100%; 15 | filter: blur(30px); 16 | } 17 | 18 | .intro { 19 | height: 100vh; 20 | background: url("../images/background.jpg"); 21 | background-repeat: no-repeat; 22 | background-position: bottom center; 23 | background-size: cover; 24 | display: flex; 25 | .content { 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: center; 29 | align-items: center; 30 | text-align: center; 31 | z-index: 100; 32 | h1 { 33 | font-size: 16rem; 34 | font-weight: bold; 35 | text-shadow: 36 | -1px -1px #a7a7a7, 37 | 1px 1px #a7a7a7, 38 | 2px 2px #a7a7a7, 39 | 3px 3px #a7a7a7, 40 | 4px 4px #a7a7a7, 41 | 5px 5px #a7a7a7, 42 | 6px 6px #a7a7a7; 43 | animation: float 6s ease-in-out infinite; 44 | @keyframes float { 45 | 0% { 46 | transform: translatey(0px); 47 | } 48 | 50% { 49 | transform: translatey(-20px); 50 | } 51 | 100% { 52 | transform: translatey(0px); 53 | } 54 | } 55 | } 56 | h2 { 57 | font-weight: 400; 58 | font-size: 3rem; 59 | text-transform: uppercase; 60 | -webkit-text-stroke: 1px #a7a7a7; 61 | } 62 | a { 63 | text-transform: uppercase; 64 | border-radius: 10px; 65 | box-shadow: 66 | 12px 12px 16px 0 rgba(0, 0, 0, 0.25), 67 | -8px -8px 12px 0 rgba(255, 255, 255, 0.3); 68 | &:hover { 69 | transform: scale(1.1); 70 | } 71 | } 72 | } 73 | } 74 | 75 | //Media queries 76 | @media (max-width: 991px) { 77 | /* Rules for tablets and smaller viewports */ 78 | .intro { 79 | .content { 80 | h1 { 81 | font-size: 12rem; 82 | } 83 | h2 { 84 | font-size: 2.5rem; 85 | } 86 | } 87 | } 88 | } 89 | 90 | @media (max-width: 767px) { 91 | /* Rules for smartphones only */ 92 | .intro { 93 | .content { 94 | h1 { 95 | font-size: 9rem; 96 | } 97 | h2 { 98 | font-size: 2rem; 99 | } 100 | } 101 | } 102 | } 103 | @media (min-width: 1200px) { 104 | /* Rules for larger desktop screens only */ 105 | .intro { 106 | .content { 107 | h1 { 108 | font-size: 18rem; 109 | } 110 | h2 { 111 | font-size: 4rem; 112 | } 113 | } 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /dots/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | Dots | tsParticles 404 21 | 22 | 23 | 24 | 25 | 26 |
27 |

404
Not Found

28 |

29 | We're sorry, we couldn't find what you were looking for. Please try 30 | again! 31 |

32 |
33 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /dots/css/styles.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | body { 4 | margin: 0; 5 | } 6 | h1 { 7 | font-family: Baskerville, "Palatino Linotype", Palatino, 8 | "Century Schoolbook L", "Times New Roman", "serif"; 9 | font-size: 5em; 10 | color: rgb(0, 0, 255); 11 | } 12 | p { 13 | font-family: Baskerville, "Palatino Linotype", Palatino, 14 | "Century Schoolbook L", "Times New Roman", "serif"; 15 | font-size: 2em; 16 | color: rgb(0, 0, 255); 17 | } 18 | canvas { 19 | display: block; 20 | vertical-align: top; 21 | top: 0; 22 | } 23 | #tsparticles { 24 | margin-right: auto; 25 | margin-left: auto; 26 | width: 95%; 27 | background-color: rgb(255, 255, 255); 28 | text-align: center; 29 | } 30 | -------------------------------------------------------------------------------- /dots/js/animate.js: -------------------------------------------------------------------------------- 1 | // JavaScript Document 2 | // tsParticles library - https://github.com/matteobruni/tsparticles 3 | 4 | tsParticles.load("tsparticles", { 5 | backgroundMask: { 6 | enable: true, 7 | cover: { 8 | value: { 9 | r: 255, 10 | g: 255, 11 | b: 255, 12 | }, 13 | }, 14 | }, 15 | background: { 16 | color: "#0000ff", 17 | size: "100% 100%", 18 | repeat: "no-repeat", 19 | }, 20 | fullScreen: { 21 | enable: true, 22 | zIndex: -1, 23 | }, 24 | particles: { 25 | color: { 26 | value: "#000000", 27 | animation: { 28 | enable: true, 29 | speed: 700, 30 | }, 31 | }, 32 | move: { 33 | direction: "top", 34 | enable: true, 35 | outModes: { 36 | default: "out", 37 | }, 38 | size: true, 39 | speed: { 40 | min: 1, 41 | max: 2, 42 | }, 43 | }, 44 | number: { 45 | value: 200, 46 | density: { 47 | enable: true, 48 | area: 800, 49 | }, 50 | }, 51 | opacity: { 52 | value: 1, 53 | animation: { 54 | enable: false, 55 | startValue: "max", 56 | destroy: "min", 57 | speed: 0.2, 58 | sync: true, 59 | }, 60 | }, 61 | rotate: { 62 | value: { 63 | min: 0, 64 | max: 360, 65 | }, 66 | direction: "random", 67 | move: true, 68 | animation: { 69 | enable: true, 70 | speed: 60, 71 | }, 72 | }, 73 | tilt: { 74 | direction: "random", 75 | enable: true, 76 | move: true, 77 | value: { 78 | min: 0, 79 | max: 360, 80 | }, 81 | animation: { 82 | enable: true, 83 | speed: 60, 84 | }, 85 | }, 86 | shape: { 87 | type: ["circle"], 88 | }, 89 | size: { 90 | value: { 91 | min: 3, 92 | max: 5, 93 | }, 94 | }, 95 | roll: { 96 | darken: { 97 | enable: true, 98 | value: 30, 99 | }, 100 | enlighten: { 101 | enable: true, 102 | value: 30, 103 | }, 104 | enable: true, 105 | speed: { 106 | min: 15, 107 | max: 25, 108 | }, 109 | }, 110 | wobble: { 111 | distance: 30, 112 | enable: true, 113 | move: true, 114 | speed: { 115 | min: -15, 116 | max: 15, 117 | }, 118 | }, 119 | }, 120 | }); 121 | -------------------------------------------------------------------------------- /fire/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | Fire | tsParticles 404 23 | 24 | 25 | 26 | 27 |
28 |
29 |

404.

30 |

the page you're looking for doesn't exists

31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /fire/app.js: -------------------------------------------------------------------------------- 1 | (async () => { 2 | await loadFirePreset(tsParticles); 3 | 4 | await tsParticles.load("tsparticles", { 5 | preset: "fire", 6 | }); 7 | })(); 8 | -------------------------------------------------------------------------------- /fire/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap"); 2 | body { 3 | background-color: rgb(0, 0, 0); 4 | color: white; 5 | z-index: 3; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | .container { 10 | position: absolute; 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | width: 100%; 15 | height: 100%; 16 | justify-content: center; 17 | font-family: "Cinzel Decorative", cursive; 18 | font-size: 1.2em; 19 | text-shadow: 0px 0px 20px #ffe1e1; 20 | } 21 | .container h1 { 22 | font-size: 5em; 23 | font-weight: normal; 24 | margin: 0.1em; 25 | } 26 | button { 27 | border: 0.1em solid white; 28 | background: none; 29 | font-family: inherit; 30 | color: inherit; 31 | padding: 1.3em; 32 | margin: 1.5em; 33 | font-size: 0.8em; 34 | text-shadow: 0px 0px 20px #ffe1e1; 35 | box-shadow: 0px 0px 20px 0px #785858; 36 | } 37 | -------------------------------------------------------------------------------- /fireworks/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 19 | 20 | Fireworks | tsParticles 404 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | Lamp 33 | 34 |
35 |
36 |
37 |

Oops!

38 |

39 | 404 - The Page can't be found 40 |

41 |
42 | 43 |
44 | 45 | logo 50 | logo 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /fireworks/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Dancing+Script&display=swap"); 2 | @import url("https://fonts.googleapis.com/css?family=Satisfy&display=swap"); 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | font-family: "Satisfy", cursive; 7 | } 8 | 9 | body { 10 | background: #006266; 11 | } 12 | 13 | .container { 14 | position: absolute; 15 | left: 50%; 16 | top: 50%; 17 | transform: translate(-50%, -50%); 18 | } 19 | 20 | .diya { 21 | width: 200px; 22 | height: 100px; 23 | background: #ff3838; 24 | border-bottom-left-radius: 100px; 25 | border-bottom-right-radius: 100px; 26 | position: relative; 27 | left: 50%; 28 | transform: translateX(-50%); 29 | } 30 | 31 | .diya:before { 32 | position: absolute; 33 | content: ""; 34 | width: 200px; 35 | height: 60px; 36 | background: #f1c40f; 37 | border-radius: 50%; 38 | border: 10px solid #222; 39 | box-sizing: border-box; 40 | top: -30px; 41 | } 42 | 43 | .diya:after { 44 | position: absolute; 45 | content: ""; 46 | width: 50px; 47 | height: 150px; 48 | background: #f1c40f; 49 | border-radius: 50%; 50 | bottom: 90%; 51 | box-shadow: 52 | 0px 0px 30px #f1c40f, 53 | 0px 0px 50px #f1c40f; 54 | animation: animate 2s ease infinite; 55 | transform-origin: bottom; 56 | } 57 | 58 | @keyframes animate { 59 | 0% { 60 | transform: scaleY(1); 61 | } 62 | 50% { 63 | transform: scaleY(1.07) scaleX(1.05); 64 | } 65 | 100% { 66 | transform: scaleY(1); 67 | } 68 | } 69 | 70 | .message { 71 | text-align: center; 72 | color: #fff; 73 | } 74 | 75 | .lamp1 { 76 | position: relative; 77 | left: 0%; 78 | height: 170px; 79 | } 80 | 81 | .lamp2 { 82 | position: relative; 83 | left: 35%; 84 | height: 170px; 85 | } 86 | 87 | .lamp3 { 88 | position: relative; 89 | height: 170px; 90 | float: right; 91 | } 92 | 93 | #clickMe { 94 | position: relative; 95 | font-size: 25px; 96 | margin-left: 43%; 97 | border: 2px solid #b71c1c; 98 | border-radius: 0.6em; 99 | color: white; 100 | cursor: pointer; 101 | transition: all 150ms ease-in-out; 102 | text-transform: uppercase; 103 | background-color: #b71c1c; 104 | padding: 13px 23px; 105 | -webkit-transition: all 150ms ease-in-out; 106 | -moz-transition: all 150ms ease-in-out; 107 | -ms-transition: all 150ms ease-in-out; 108 | -o-transition: all 150ms ease-in-out; 109 | box-shadow: 110 | 0 0 40px 40px #b71c1c inset, 111 | 0 0 0 0 #b71c1c; 112 | } 113 | 114 | #clickMe:hover { 115 | box-shadow: 116 | 0 0 10px 0 #b71c1c inset, 117 | 0 0 10px 4px #b71c1c; 118 | } 119 | -------------------------------------------------------------------------------- /fireworks/js/404.js: -------------------------------------------------------------------------------- 1 | (async () => { 2 | await loadFireworksPreset(tsParticles); 3 | 4 | await tsParticles.load("tsparticles", { 5 | preset: "fireworks", 6 | }); 7 | })(); 8 | -------------------------------------------------------------------------------- /flower/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | 23 | Flower | tsParticles 404 24 | 25 | 26 | 27 |
28 |
29 |

Congratulations! You found our secret page.

30 |
Take me home!
31 |
32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /flower/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Chango&display=swap"); 2 | 3 | #tsparticles { 4 | position: fixed; 5 | width: 100%; 6 | height: 100%; 7 | } 8 | 9 | h1 { 10 | font-size: 7em; 11 | text-align: center; 12 | font-family: "Chango", cursive; 13 | position: relative; 14 | color: black; 15 | margin: 0; 16 | padding: 0; 17 | overflow: hidden; 18 | } 19 | 20 | #container { 21 | align-items: center; 22 | justify-content: center; 23 | flex-direction: column; 24 | display: flex; 25 | position: fixed; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 100%; 30 | z-index: 10; 31 | mix-blend-mode: screen; 32 | background: white; 33 | } 34 | 35 | #back-button { 36 | border: 2px black solid; 37 | margin: 1em; 38 | padding: 1em; 39 | font-size: 1em; 40 | font-family: fantasy; 41 | cursor: pointer; 42 | } 43 | -------------------------------------------------------------------------------- /flower/js/404.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | fpsLimit: 60, 3 | fullScreen: { 4 | enable: true, 5 | }, 6 | background: { 7 | color: "#8093F1", 8 | }, 9 | interactivity: { 10 | detectsOn: "window", 11 | events: { 12 | resize: true, 13 | onHover: { 14 | enable: true, 15 | mode: "bubble", 16 | }, 17 | }, 18 | modes: { 19 | bubble: { distance: 100, duration: 2, opacity: 0.8, size: 40, speed: 3 }, 20 | grab: { distance: 400, links: { opacity: 1 } }, 21 | push: { quantity: 4 }, 22 | remove: { quantity: 2 }, 23 | repulse: { distance: 200, duration: 0.4 }, 24 | }, 25 | }, 26 | particles: { 27 | color: { value: "random" }, 28 | links: { 29 | color: "random", 30 | distance: 150, 31 | enable: false, 32 | opacity: 0.4, 33 | width: 1, 34 | }, 35 | move: { 36 | attract: { enable: false, rotateX: 600, rotateY: 1200 }, 37 | bounce: false, 38 | direction: "none", 39 | enable: true, 40 | out_mode: "out", 41 | random: false, 42 | speed: 3, 43 | straight: false, 44 | }, 45 | rotate: { 46 | animation: { 47 | enable: true, 48 | speed: 10, 49 | sync: false, 50 | }, 51 | }, 52 | number: { density: { enable: true, area: 800 }, value: 100 }, 53 | opacity: { 54 | animation: { enable: true, minimumValue: 0.5, speed: 1, sync: false }, 55 | random: false, 56 | value: 1, 57 | }, 58 | shape: { 59 | character: [ 60 | { 61 | fill: true, 62 | font: "Verdana", 63 | value: ["🌸", "🌺", "🌼", "🪷", "🌹", "🌻"], 64 | style: "", 65 | weight: 400, 66 | }, 67 | ], 68 | image: { 69 | height: 100, 70 | replace_color: true, 71 | src: "images/github.svg", 72 | width: 100, 73 | }, 74 | polygon: { nb_sides: 5 }, 75 | stroke: { color: "random", width: 1 }, 76 | type: "char", 77 | }, 78 | size: { 79 | anim: { enable: true, minimumValue: 8, speed: 20, sync: false }, 80 | random: { minimumValue: 8, enable: true }, 81 | value: 32, 82 | }, 83 | }, 84 | detectRetina: true, 85 | }); 86 | -------------------------------------------------------------------------------- /galaxy/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | Milky Way | tsParticles 404 20 | 21 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 |
34 |

Oops... something went wrong!

35 |

🚀 404 Not Found 🚀

36 |

The galaxy has hidden this page from us.

37 |

It seems the page you were looking for is lost among the stars.

38 | 43 |
44 | 45 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /galaxy/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap"); 2 | 3 | /** Styles for the 404 Page **/ 4 | 5 | .galaxy-background, 6 | #tsparticles { 7 | width: 100%; 8 | height: 100%; 9 | background-color: black; 10 | margin: 0; 11 | overflow: hidden; 12 | } 13 | 14 | #tsparticles { 15 | position: fixed; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | height: 100%; 20 | z-index: -1; 21 | } 22 | 23 | .galaxy-message { 24 | color: #ffffff; 25 | max-width: 600px; 26 | width: 90%; 27 | height: auto; 28 | display: block; 29 | margin: 0 auto; 30 | position: relative; 31 | text-align: center; 32 | font-family: "Orbitron", sans-serif; 33 | z-index: 1; 34 | padding: 20px; 35 | border-radius: 8px; 36 | } 37 | 38 | .galaxy-message h1, 39 | h2, 40 | h3, 41 | p { 42 | margin: 0; 43 | padding: 10px; 44 | border-radius: 5px; 45 | } 46 | 47 | .galaxy-message h1 { 48 | color: #00f5e4; 49 | font-size: 4em; 50 | font-weight: bold; 51 | } 52 | 53 | .galaxy-message h2 { 54 | color: #ff0044; 55 | font-size: 2.5em; 56 | } 57 | 58 | .galaxy-message h3 { 59 | color: #ffffff; 60 | font-size: 1.5em; 61 | } 62 | 63 | .galaxy-message p { 64 | color: #e0e0e0; 65 | font-size: 1.2em; 66 | } 67 | 68 | .galaxy-link { 69 | background: #ff0044; 70 | color: #ffffff; 71 | padding: 10px 20px; 72 | border: none; 73 | border-radius: 5px; 74 | font-size: 1.2em; 75 | cursor: pointer; 76 | text-decoration: none; 77 | display: inline-block; 78 | margin-top: 20px; 79 | } 80 | 81 | .galaxy-link:hover { 82 | background: #ff9f00; 83 | color: #000000; 84 | } 85 | -------------------------------------------------------------------------------- /galaxy/image/astroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/galaxy/image/astroid.png -------------------------------------------------------------------------------- /galaxy/js/404.js: -------------------------------------------------------------------------------- 1 | const particles = { 2 | fpsLimit: 60, 3 | particles: { 4 | number: { 5 | value: 500, 6 | density: { 7 | enable: true, 8 | area: 800, 9 | }, 10 | }, 11 | color: { 12 | value: ["#ffffff"], 13 | animation: { 14 | enable: true, 15 | speed: 30, 16 | sync: true, 17 | }, 18 | }, 19 | shape: { 20 | type: "image", // Use image shape 21 | image: { 22 | src: "./image/astroid.png", 23 | width: 100, 24 | height: 100, 25 | }, 26 | }, 27 | size: { 28 | value: 30, 29 | random: { 30 | enable: true, 31 | minimumValue: 5, 32 | }, 33 | }, 34 | move: { 35 | enable: true, 36 | speed: 1, 37 | direction: "none", 38 | outModes: { 39 | default: "out", 40 | }, 41 | path: { 42 | delay: { 43 | value: 0.5, 44 | }, 45 | generator: (particle, time) => { 46 | const angle = time / 1000; 47 | const radius = 200; 48 | return { 49 | x: Math.cos(angle) * radius, 50 | y: Math.sin(angle) * radius, 51 | }; 52 | }, 53 | }, 54 | }, 55 | opacity: { 56 | value: 0.8, 57 | random: { 58 | enable: true, 59 | minimumValue: 0.3, 60 | }, 61 | }, 62 | }, 63 | detectRetina: true, 64 | }; 65 | 66 | tsParticles.load("tsparticles", particles); 67 | -------------------------------------------------------------------------------- /glitch/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | 23 | Glitch | tsParticles 404 24 | 25 | 26 | 27 | 28 |
404
29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /glitch/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Fira+Mono:400"); 2 | 3 | body { 4 | display: flex; 5 | width: 100vw; 6 | height: 100vh; 7 | align-items: center; 8 | justify-content: center; 9 | margin: 0; 10 | color: #fff; 11 | font-size: 25vw; 12 | font-family: "Fira Mono", monospace; 13 | } 14 | 15 | #glitch { 16 | animation: glitch 1s linear infinite; 17 | } 18 | 19 | @keyframes glitch { 20 | 2%, 21 | 64% { 22 | transform: translate(2px, 0) skew(0deg); 23 | } 24 | 25 | 4%, 26 | 60% { 27 | transform: translate(-2px, 0) skew(0deg); 28 | } 29 | 30 | 62% { 31 | transform: translate(0, 0) skew(5deg); 32 | } 33 | } 34 | 35 | #glitch::before, 36 | #glitch::after { 37 | content: attr(title); 38 | position: absolute; 39 | left: 0; 40 | } 41 | 42 | #glitch::before { 43 | animation: glitchTop 1s linear infinite; 44 | clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); 45 | -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); 46 | } 47 | 48 | @keyframes glitchTop { 49 | 2%, 50 | 64% { 51 | transform: translate(2px, -2px); 52 | } 53 | 54 | 4%, 55 | 60% { 56 | transform: translate(-2px, 2px); 57 | } 58 | 59 | 62% { 60 | transform: translate(13px, -1px) skew(-13deg); 61 | } 62 | } 63 | 64 | #glitch::after { 65 | animation: glitchBottom 1.5s linear infinite; 66 | clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); 67 | -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); 68 | } 69 | 70 | @keyframes glitchBottom { 71 | 2%, 72 | 64% { 73 | transform: translate(-2px, 0); 74 | } 75 | 76 | 4%, 77 | 60% { 78 | transform: translate(-2px, 0); 79 | } 80 | 81 | 62% { 82 | transform: translate(-22px, 5px) skew(21deg); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /glitch/js/404.js: -------------------------------------------------------------------------------- 1 | (async () => { 2 | await loadPolygonPath(tsParticles); 3 | 4 | await tsParticles.load({ 5 | particles: { 6 | color: { 7 | value: "#ffd966", 8 | animation: { 9 | enable: true, 10 | speed: 10, 11 | }, 12 | }, 13 | move: { 14 | attract: { 15 | enable: false, 16 | distance: 100, 17 | rotate: { 18 | x: 2000, 19 | y: 2000, 20 | }, 21 | }, 22 | direction: "none", 23 | enable: true, 24 | outModes: { 25 | default: "destroy", 26 | }, 27 | path: { 28 | clamp: false, 29 | enable: true, 30 | delay: { 31 | value: 0, 32 | }, 33 | generator: "polygonPathGenerator", 34 | options: { 35 | sides: 6, 36 | turnSteps: 30, 37 | angle: 30, 38 | }, 39 | }, 40 | random: false, 41 | speed: 6, 42 | straight: false, 43 | trail: { 44 | fillColor: "#000", 45 | length: 20, 46 | enable: true, 47 | }, 48 | }, 49 | number: { 50 | density: { 51 | enable: true, 52 | area: 800, 53 | }, 54 | value: 0, 55 | }, 56 | opacity: { 57 | value: 1, 58 | }, 59 | shape: { 60 | type: "circle", 61 | }, 62 | size: { 63 | value: 2, 64 | }, 65 | }, 66 | background: { 67 | color: "#000", 68 | }, 69 | fullScreen: { 70 | zIndex: -1, 71 | }, 72 | emitters: { 73 | direction: "none", 74 | rate: { 75 | quantity: 1, 76 | delay: 0.25, 77 | }, 78 | size: { 79 | width: 0, 80 | height: 0, 81 | }, 82 | position: { 83 | x: 50, 84 | y: 50, 85 | }, 86 | }, 87 | }); 88 | })(); 89 | -------------------------------------------------------------------------------- /hexagon/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | Hexagon | tsParticles 404 20 | 21 | 25 | 26 | 27 | 28 |
29 | 30 |
31 |
32 |

404.

33 |

OOPS !!

34 |
35 | 36 |

It appears the page you're looking for is empty, try again.

37 | 38 | 41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /hexagon/script.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | particles: { 3 | number: { value: 150, density: { enable: false, value_area: 800 } }, 4 | color: { value: "#383A3F" }, 5 | shape: { 6 | type: "polygon", 7 | polygon: { nb_sides: 6 }, 8 | }, 9 | opacity: { 10 | value: 0.3, 11 | random: true, 12 | anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }, 13 | }, 14 | size: { 15 | value: 20, 16 | random: false, 17 | anim: { enable: true, speed: 10, size_min: 60, sync: false }, 18 | }, 19 | line_linked: { 20 | enable: false, 21 | }, 22 | move: { 23 | enable: true, 24 | speed: 2, 25 | direction: "none", 26 | random: false, 27 | straight: false, 28 | out_mode: "out", 29 | bounce: false, 30 | attract: { enable: false, rotateX: 600, rotateY: 1200 }, 31 | }, 32 | }, 33 | interactivity: { 34 | detect_on: "window", 35 | events: { 36 | onhover: { enable: true, mode: "bubble" }, 37 | resize: true, 38 | }, 39 | modes: { 40 | bubble: { distance: 100, size: 20, duration: 2, opacity: 4, speed: 3 }, 41 | }, 42 | }, 43 | retina_detect: false, 44 | }); 45 | -------------------------------------------------------------------------------- /hexagon/style.css: -------------------------------------------------------------------------------- 1 | /* body{ 2 | background-color: #23252A; 3 | } 4 | 5 | #tsparticle{ 6 | width:100%; 7 | height:100%; 8 | } */ 9 | 10 | html { 11 | height: 100%; 12 | overflow: hidden; 13 | } 14 | 15 | body { 16 | background: #7fdcec; 17 | font-family: "Varela", sans-serif; 18 | height: calc(100%); 19 | overflow: auto; 20 | position: relative; 21 | } 22 | 23 | #tsparticles { 24 | width: 100%; 25 | height: 100%; 26 | position: absolute; 27 | z-index: -1; 28 | } 29 | .images { 30 | text-align: center; 31 | width: 50%; 32 | height: auto; 33 | margin-top: 20%; 34 | opacity: 80%; 35 | } 36 | 37 | .para { 38 | text-align: center; 39 | width: 50%; 40 | height: auto; 41 | } 42 | h2 { 43 | font-size: 100px; 44 | opacity: 80%; 45 | } 46 | 47 | h3 { 48 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 49 | font-size: 40px; 50 | opacity: 60%; 51 | } 52 | p { 53 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 54 | font-size: 24px; 55 | } 56 | 57 | button { 58 | opacity: 50%; 59 | font-size: 17px; 60 | background-color: #f16a6a; 61 | padding: 3%; 62 | margin-top: 5%; 63 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 64 | } 65 | -------------------------------------------------------------------------------- /images/tsParticles-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/images/tsParticles-64.png -------------------------------------------------------------------------------- /imposter/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | Document 23 | 24 | 25 | 26 | 27 |
28 |
29 |

404

30 |

Maybe you're lost or you are an imposter👻

31 |
32 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /imposter/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Audiowide"); 2 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono"); 3 | /* ---- reset ---- */ 4 | body { 5 | margin: 0; 6 | font: 7 | normal 75% Arial, 8 | Helvetica, 9 | sans-serif; 10 | } 11 | canvas { 12 | display: block; 13 | vertical-align: bottom; 14 | } 15 | /* ---- tsparticles container ---- */ 16 | .github { 17 | bottom: 10px; 18 | right: 10px; 19 | position: fixed; 20 | border-radius: 10px; 21 | background: #fff; 22 | padding: 0 12px 6px 12px; 23 | border: 1px solid #000; 24 | } 25 | 26 | .github a:hover, 27 | .github a:link, 28 | .github a:visited, 29 | .github a:active { 30 | color: #000; 31 | text-decoration: none; 32 | } 33 | 34 | .github img { 35 | height: 30px; 36 | } 37 | 38 | .github #gh-project { 39 | font-size: 20px; 40 | padding-left: 5px; 41 | font-weight: bold; 42 | vertical-align: bottom; 43 | } 44 | .textContainer { 45 | position: absolute; 46 | color: white; 47 | } 48 | #tsparticles { 49 | z-index: 0; 50 | position: fixed; 51 | width: 100%; 52 | height: 100%; 53 | top: 0; 54 | left: 0; 55 | margin: 0; 56 | } 57 | section { 58 | position: absolute; 59 | width: 100%; 60 | text-align: center; 61 | color: white; 62 | } 63 | section h1 { 64 | font-family: "Audiowide", sans-serif; 65 | font-size: 11rem; 66 | margin: 0%; 67 | margin-top: 4rem; 68 | } 69 | section h2 { 70 | font-family: "Roboto Mono", sans-serif; 71 | font-size: 2rem; 72 | margin: 0%; 73 | } 74 | -------------------------------------------------------------------------------- /jitter/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 28 | 404-Jitter 29 | 30 | 31 | 32 | 33 |
34 | 35 |
36 |
37 |

404

38 | Go back 39 |
40 |
41 |
42 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /jitter/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: "Space Mono", monospace; 4 | } 5 | 6 | canvas { 7 | display: block; 8 | } 9 | 10 | #tsparticles { 11 | z-index: 0; 12 | position: fixed; 13 | top: 0; 14 | left: 0; 15 | } 16 | section { 17 | position: absolute; 18 | width: 100%; 19 | height: 100vh; 20 | text-align: center; 21 | color: white; 22 | display: grid; 23 | place-content: center; 24 | } 25 | 26 | .text { 27 | display: flex; 28 | flex-direction: column; 29 | gap: 1rem; 30 | } 31 | 32 | h1 { 33 | font-family: "Space Mono", monospace; 34 | font-size: clamp(3rem, 30vw, 12rem); 35 | color: #fdee00; 36 | white-space: nowrap; 37 | letter-spacing: 0.2em; 38 | padding: 0rem; 39 | border-radius: clamp(0.4rem, 0.75vw, 1rem); 40 | margin: 0; 41 | line-height: 1.2; 42 | z-index: 3; 43 | animation: jitter 1s linear infinite; 44 | } 45 | 46 | #back { 47 | text-decoration: none; 48 | font-family: "Arial", monospace; 49 | color: #c0c0c0; 50 | width: fit-content; 51 | letter-spacing: 0.1em; 52 | margin-inline: auto; 53 | padding: 1em; 54 | } 55 | 56 | #back:hover { 57 | color: #fff; 58 | } 59 | 60 | @keyframes jitter { 61 | 2%, 62 | 64% { 63 | transform: translate(2px, 0) skew(0deg); 64 | } 65 | 4%, 66 | 60% { 67 | transform: translate(-2px, 0) skew(1deg); 68 | filter: brightness(0.95); 69 | } 70 | 62% { 71 | transform: translate(0, 0) skew(-3deg); 72 | filter: brightness(1.5); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | const pages = $("#pages"); 3 | 4 | $.get("data/pages.json", function (data) { 5 | $.each(data, function (idx, item) { 6 | const page = $("
"); 7 | 8 | page.addClass("col-md-4"); 9 | 10 | const card = $("
"); 11 | 12 | card.addClass("card mb-4 shadow-sm"); 13 | 14 | const image = $(""); 15 | 16 | image.addClass("bd-placeholder-img card-img-top"); 17 | image.attr({ 18 | width: "100%", 19 | height: 196, 20 | focusable: false, 21 | role: "img", 22 | ariaLabel: item.description, 23 | src: item.imageUrl, 24 | }); 25 | 26 | card.append(image); 27 | 28 | const cardBody = $("
"); 29 | 30 | cardBody.addClass("card-body"); 31 | 32 | const cardText = $("
"); 33 | 34 | cardText.addClass("card-text"); 35 | cardText.text(item.description); 36 | 37 | cardBody.append(cardText); 38 | 39 | const cardContent = $("
"); 40 | 41 | cardContent.addClass("d-flex justify-content-between align-items-center"); 42 | 43 | const btnGroup = $("
"); 44 | 45 | btnGroup.addClass("btn-group"); 46 | 47 | const btn = $(""); 48 | 49 | btn.addClass("btn btn-sm btn-outline-secondary"); 50 | btn.text("View"); 51 | btn.attr({ 52 | href: item.url, 53 | target: "_blank", 54 | }); 55 | 56 | btnGroup.append(btn); 57 | 58 | cardContent.append(btnGroup); 59 | 60 | cardBody.append(cardContent); 61 | 62 | card.append(cardBody); 63 | 64 | page.append(card); 65 | 66 | pages.append(page); 67 | }); 68 | }); 69 | }); 70 | -------------------------------------------------------------------------------- /links/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | Links | tsParticles 404 25 | 26 | 27 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 42 | 43 | 44 | 45 |
46 | 47 | 56 | 57 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /links/js/404.js: -------------------------------------------------------------------------------- 1 | const particles = { 2 | background: { 3 | color: { 4 | value: "#0d47a1", 5 | }, 6 | }, 7 | fpsLimit: 60, 8 | particles: { 9 | color: { 10 | value: "#ffffff", 11 | }, 12 | links: { 13 | color: "#ffffff", 14 | distance: 150, 15 | enable: true, 16 | opacity: 0.5, 17 | width: 1, 18 | }, 19 | collisions: { 20 | enable: true, 21 | }, 22 | move: { 23 | direction: "none", 24 | enable: true, 25 | outMode: "bounce", 26 | random: false, 27 | speed: 3, 28 | straight: false, 29 | }, 30 | number: { 31 | density: { 32 | enable: true, 33 | area: 800, 34 | }, 35 | value: 80, 36 | }, 37 | opacity: { 38 | value: 0.5, 39 | }, 40 | shape: { 41 | type: "circle", 42 | }, 43 | size: { 44 | random: true, 45 | value: 5, 46 | }, 47 | }, 48 | detectRetina: true, 49 | }; 50 | 51 | tsParticles.load("tsparticles", particles); 52 | -------------------------------------------------------------------------------- /masked/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 19 | 20 | Masked | tsParticles 404 21 | 22 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | 35 |
36 |

404

37 |
38 | 39 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /masked/css/404.css: -------------------------------------------------------------------------------- 1 | /* ---- reset ---- */ 2 | html, 3 | body { 4 | height: 100%; 5 | overflow: hidden; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | } 11 | 12 | /* ---- tsparticles container ---- */ 13 | #tsparticles { 14 | position: fixed; 15 | width: 100%; 16 | height: 100%; 17 | filter: blur(30px); 18 | } 19 | 20 | h1 { 21 | width: 100%; 22 | text-align: center; 23 | font-family: "Nerko One", cursive; 24 | position: relative; 25 | color: black; 26 | margin: 0; 27 | padding: 0; 28 | overflow: hidden; 29 | background: white; 30 | } 31 | 32 | @media (max-aspect-ratio: 10/5) { 33 | h1 { 34 | font-size: 50vw !important; 35 | letter-spacing: 10px !important; 36 | } 37 | } 38 | 39 | @media (min-aspect-ratio: 10/5) { 40 | h1 { 41 | font-size: 100vh !important; 42 | letter-spacing: 100px !important; 43 | } 44 | } 45 | 46 | #container { 47 | align-items: center; 48 | justify-content: center; 49 | display: flex; 50 | position: fixed; 51 | top: 0; 52 | left: 0; 53 | width: 100%; 54 | height: 100%; 55 | z-index: 10; 56 | mix-blend-mode: screen; 57 | background: white; 58 | } 59 | -------------------------------------------------------------------------------- /masked/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/masked/images/background.jpg -------------------------------------------------------------------------------- /masked/js/404.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | background: { 3 | color: "#fff", 4 | }, 5 | fpsLimit: 60, 6 | interactivity: { 7 | detectsOn: "window", 8 | events: { 9 | resize: true, 10 | onHover: { 11 | enable: true, 12 | mode: "bubble", 13 | }, 14 | }, 15 | modes: { 16 | bubble: { 17 | distance: 300, 18 | opacity: 0.8, 19 | size: 100, 20 | }, 21 | }, 22 | }, 23 | particles: { 24 | color: { 25 | value: ["#f00", "#0f0", "#00f", "#ff0", "#0ff", "#f0f"], 26 | animation: { 27 | enable: true, 28 | speed: 40, 29 | sync: false, 30 | }, 31 | }, 32 | move: { 33 | direction: "none", 34 | enable: true, 35 | outModes: { 36 | default: "bounce", 37 | }, 38 | random: false, 39 | speed: 5, 40 | straight: false, 41 | }, 42 | number: { 43 | density: { 44 | enable: true, 45 | area: 800, 46 | }, 47 | value: 160, 48 | }, 49 | opacity: { 50 | random: { 51 | enable: true, 52 | minimumValue: 0.2, 53 | }, 54 | value: 0.8, 55 | }, 56 | shape: { 57 | type: "circle", 58 | }, 59 | stroke: { 60 | color: "#ff0000", 61 | width: 0, 62 | }, 63 | size: { 64 | random: { 65 | enable: true, 66 | minimumValue: 25, 67 | }, 68 | value: 50, 69 | }, 70 | }, 71 | detectRetina: true, 72 | }); 73 | -------------------------------------------------------------------------------- /matrix-revolutions/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 404 21 | 22 | 23 | 24 |
25 |

404

26 |

This page does not exist

27 |

But The Matrix does

28 |
29 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /matrix-revolutions/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono"); 2 | .text-center { 3 | position: absolute; 4 | width: 40%; 5 | top: 10%; 6 | text-align: center; 7 | left: calc((100% - 40%) / 2); 8 | color: white; 9 | } 10 | .text-center h1 { 11 | font-size: 11em; 12 | font-family: "Roboto Mono", sans-serif; 13 | margin: 2rem; 14 | } 15 | .text-center h2 { 16 | font-family: "Roboto Mono", sans-serif; 17 | font-size: 2rem; 18 | margin: 0%; 19 | } 20 | -------------------------------------------------------------------------------- /matrix-revolutions/js/404.js: -------------------------------------------------------------------------------- 1 | (async () => { 2 | await tsParticles.load("tsparticles", { 3 | particles: { 4 | color: { 5 | value: "#00FF00", 6 | }, 7 | move: { 8 | direction: "bottom", 9 | enable: true, 10 | outModes: { 11 | default: "destroy", 12 | }, 13 | random: true, 14 | speed: 20, 15 | straight: true, 16 | trail: { 17 | fillColor: "#000", 18 | length: 15, 19 | enable: true, 20 | }, 21 | }, 22 | number: { 23 | limit: 40, 24 | }, 25 | }, 26 | background: { 27 | color: "#000", 28 | }, 29 | fullScreen: { 30 | zIndex: -1, 31 | }, 32 | emitters: [ 33 | { 34 | direction: "bottom", 35 | size: { 36 | width: 100, 37 | height: 0, 38 | }, 39 | position: { 40 | x: 50, 41 | y: 0, 42 | }, 43 | }, 44 | ], 45 | }); 46 | })(); 47 | -------------------------------------------------------------------------------- /matrix/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 404 Not Found 21 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |

404

32 |

This page does not exist.

33 |
34 | 39 | 40 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /matrix/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono"); 2 | .text-center { 3 | position: absolute; 4 | width: 30%; 5 | border-radius: 2rem; 6 | height: calc(30%); 7 | top: calc((100% - 30%) / 2); 8 | text-align: center; 9 | left: calc((100% - 30%) / 2); 10 | color: white; 11 | } 12 | .text-center h1 { 13 | font-size: 11em; 14 | font-family: "Roboto Mono", sans-serif; 15 | } 16 | .text-center h2 { 17 | font-family: "Roboto Mono", sans-serif; 18 | font-size: 2rem; 19 | margin: 0%; 20 | } 21 | -------------------------------------------------------------------------------- /matrix/js/404.js: -------------------------------------------------------------------------------- 1 | (async () => { 2 | await loadPolygonPath(tsParticles); 3 | 4 | await tsParticles.load({ 5 | particles: { 6 | color: { 7 | value: "#FFFF00", 8 | animation: { 9 | enable: true, 10 | speed: 10, 11 | }, 12 | }, 13 | move: { 14 | attract: { 15 | enable: true, 16 | rotate: { 17 | distance: 100, 18 | x: 2000, 19 | y: 2000, 20 | }, 21 | }, 22 | direction: "none", 23 | enable: true, 24 | outModes: { 25 | default: "destroy", 26 | }, 27 | path: { 28 | clamp: true, 29 | enable: true, 30 | delay: { 31 | value: 0, 32 | }, 33 | generator: "polygonPathGenerator", 34 | options: { 35 | sides: 4, 36 | turnSteps: 30, 37 | angle: 0, 38 | }, 39 | }, 40 | random: true, 41 | speed: 15, 42 | straight: true, 43 | trail: { 44 | fillColor: "#000", 45 | length: 10, 46 | enable: true, 47 | }, 48 | }, 49 | number: { 50 | density: { 51 | enable: true, 52 | area: 800, 53 | }, 54 | value: 0, 55 | }, 56 | opacity: { 57 | value: 1, 58 | }, 59 | shape: { 60 | type: "square", 61 | }, 62 | size: { 63 | value: 4, 64 | }, 65 | }, 66 | background: { 67 | color: "#000", 68 | }, 69 | fullScreen: { 70 | zIndex: -1, 71 | }, 72 | emitters: [ 73 | { 74 | direction: "none", 75 | rate: { 76 | quantity: 10, 77 | delay: 0.25, 78 | }, 79 | size: { 80 | width: 0, 81 | height: 0, 82 | }, 83 | position: { 84 | x: 0, 85 | y: 0, 86 | }, 87 | }, 88 | { 89 | direction: "none", 90 | rate: { 91 | quantity: 10, 92 | delay: 0.25, 93 | }, 94 | size: { 95 | width: 0, 96 | height: 0, 97 | }, 98 | position: { 99 | x: 100, 100 | y: 100, 101 | }, 102 | }, 103 | { 104 | direction: "none", 105 | rate: { 106 | quantity: 10, 107 | delay: 0.25, 108 | }, 109 | size: { 110 | width: 0, 111 | height: 0, 112 | }, 113 | position: { 114 | x: 0, 115 | y: 100, 116 | }, 117 | }, 118 | { 119 | direction: "none", 120 | rate: { 121 | quantity: 10, 122 | delay: 0.25, 123 | }, 124 | size: { 125 | width: 0, 126 | height: 0, 127 | }, 128 | position: { 129 | x: 100, 130 | y: 0, 131 | }, 132 | }, 133 | ], 134 | }); 135 | })(); 136 | -------------------------------------------------------------------------------- /nord/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | Nord | tsParticles 404 23 | 24 | 25 | 26 | 27 | 28 |
29 |
30 |
31 |
32 |

Error 404

33 | Minimalist compass color gray 38 |
39 |

40 | The content you are looking for was not found 41 |

42 | Return to home 47 |
48 |
49 | random figures pattern 54 |
55 |
56 |
57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /nord/assets/compass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nord/assets/routes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nord/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray-color: #4c566a; 3 | --gray-dark-color: #2e3440; 4 | --blue-1-color: #81a1c1; 5 | --blue-2-color: #88c0d0; 6 | --bg-color: #ffffff; 7 | 8 | --sm-font-size: 1.6rem; 9 | --lg-font-size: 2.4rem; 10 | --sm-title-size: 4.8rem; 11 | --lg-title-size: 9.6rem; 12 | 13 | --sm-compass-size: 5rem; 14 | --lg-compass-size: 9rem; 15 | --sm-routes-size: 15rem; 16 | --lg-routes-size: 30rem; 17 | 18 | --border-radius: 1rem; 19 | } 20 | 21 | /* Globals */ 22 | *, 23 | *:before, 24 | *:after { 25 | box-sizing: inherit; 26 | } 27 | html { 28 | box-sizing: border-box; 29 | font-size: 62.5%; 30 | } 31 | body { 32 | font-size: var(--sm-font-size); 33 | font-family: 34 | system-ui, 35 | -apple-system, 36 | BlinkMacSystemFont, 37 | "Segoe UI", 38 | Roboto, 39 | Oxygen, 40 | Ubuntu, 41 | Cantarell, 42 | "Open Sans", 43 | "Helvetica Neue", 44 | sans-serif; 45 | background-color: var(--bg-color); 46 | color: var(--gray-color); 47 | display: flex; 48 | justify-content: stretch; 49 | align-items: stretch; 50 | } 51 | @media (min-width: 768px) { 52 | body { 53 | font-size: var(--lg-font-size); 54 | } 55 | } 56 | a { 57 | text-decoration: none; 58 | color: inherit; 59 | } 60 | img { 61 | width: 100%; 62 | max-width: 100%; 63 | } 64 | body, 65 | h1, 66 | h2, 67 | h3, 68 | p, 69 | a { 70 | margin: 0; 71 | } 72 | 73 | /* Container */ 74 | .container { 75 | height: 100vh; 76 | width: 100vw; 77 | z-index: 1; 78 | display: flex; 79 | justify-content: center; 80 | align-items: center; 81 | } 82 | .content { 83 | max-width: min(108rem, 85%); 84 | margin: 0 auto; 85 | display: flex; 86 | justify-content: center; 87 | align-items: center; 88 | flex-direction: column; 89 | } 90 | @media (min-width: 768px) { 91 | .content { 92 | flex-direction: row; 93 | gap: 14rem; 94 | } 95 | } 96 | 97 | /* Header */ 98 | .header { 99 | display: flex; 100 | justify-content: center; 101 | align-items: center; 102 | flex-direction: column; 103 | text-align: center; 104 | gap: 4rem; 105 | } 106 | .header__title { 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | gap: 3rem; 111 | } 112 | .header__h1 { 113 | font-size: var(--sm-title-size); 114 | color: var(--gray-dark-color); 115 | font-weight: bold; 116 | } 117 | @media (min-width: 780px) { 118 | .header__h1 { 119 | font-size: var(--lg-title-size); 120 | } 121 | } 122 | .header__ilustration { 123 | width: var(--sm-compass-size); 124 | } 125 | @media (min-width: 768px) { 126 | .header__ilustration { 127 | width: var(--lg-compass-size); 128 | } 129 | } 130 | .header__button { 131 | padding: 1.3rem 2.6rem; 132 | background-color: var(--blue-2-color); 133 | border-radius: var(--border-radius); 134 | font-weight: bold; 135 | transition: opacity 300ms ease; 136 | } 137 | .header__button:hover { 138 | opacity: 0.75; 139 | } 140 | 141 | /* 404 page */ 142 | .ilustration-container { 143 | margin-top: 4rem; 144 | display: flex; 145 | justify-content: center; 146 | align-items: center; 147 | } 148 | .ilustration { 149 | width: var(--sm-routes-size); 150 | margin: 0 auto; 151 | } 152 | @media (min-width: 1080px) { 153 | .ilustration { 154 | width: var(--lg-routes-size); 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /nord/index.js: -------------------------------------------------------------------------------- 1 | (async () => { 2 | await tsParticles.load("tsparticles", { 3 | preset: "fountain", 4 | }); 5 | })(); 6 | -------------------------------------------------------------------------------- /ocean/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | Ocean | tsParticles 404 23 | 24 | 404 25 | 26 | 27 | 28 |
29 |
30 | 31 |
32 |

404

33 |

We've gone too deep.

34 | 35 |
36 |
37 | 41 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /ocean/images/underwater.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/ocean/images/underwater.jpg -------------------------------------------------------------------------------- /ocean/scripts/particles.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | fpsLimit: 60, 3 | particles: { 4 | number: { 5 | value: 2800, 6 | density: { 7 | enable: true, 8 | area: 1000, 9 | }, 10 | }, 11 | color: { 12 | value: "#ffffff", 13 | }, 14 | shape: { 15 | type: "circle", 16 | }, 17 | opacity: { 18 | value: 1, 19 | random: { 20 | enable: true, 21 | minimumValue: 0.6, 22 | }, 23 | animation: { 24 | enable: true, 25 | speed: 2, 26 | minimumValue: 0, 27 | sync: false, 28 | }, 29 | }, 30 | size: { 31 | value: 5, 32 | random: { 33 | enable: true, 34 | minimumValue: 1, 35 | }, 36 | }, 37 | move: { 38 | enable: true, 39 | speed: 0.9, 40 | direction: "none", 41 | random: true, 42 | straight: false, 43 | outModes: { 44 | default: "out", 45 | }, 46 | }, 47 | }, 48 | detectRetina: true, 49 | }); 50 | -------------------------------------------------------------------------------- /ocean/styles/404.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.bunny.net/css?family=bigelow-rules:400|work-sans:400); 2 | 3 | #tsparticles { 4 | position: fixed !important; 5 | opacity: 0.5; 6 | height: 100vh; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | font-family: "Work Sans", apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 12 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 13 | } 14 | 15 | h3 { 16 | text-shadow: white 1px 0 10px; 17 | } 18 | 19 | .container { 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | height: 100vh; 24 | opacity: 0.95; 25 | background-image: url("../images/underwater.jpg"); 26 | background-size: cover; 27 | background-position: center; 28 | background-repeat: no-repeat; 29 | } 30 | 31 | .container a { 32 | text-decoration: none; 33 | } 34 | 35 | .wrapper { 36 | max-width: 390px; 37 | width: 100%; 38 | height: 390px; 39 | display: block; 40 | margin: 0 auto; 41 | position: relative; 42 | margin-top: 8vh; 43 | } 44 | 45 | .container h1 { 46 | color: #fff; 47 | margin-bottom: 0px; 48 | font-weight: 800; 49 | font-family: "Bigelow Rules", display; 50 | font-size: 8rem; 51 | text-align: center; 52 | text-shadow: 53 | 1px 1px 0px #eb452b, 54 | 3px 3px 0px #efa032, 55 | 4px 4px 0px #fff, 56 | white 1px 0 10px; 57 | } 58 | 59 | .container h3 { 60 | text-align: center; 61 | color: #fff; 62 | font-size: 19px; 63 | line-height: 23px; 64 | max-width: 330px; 65 | margin: 0px auto 30px auto; 66 | font-weight: 400; 67 | } 68 | 69 | .container h3 span { 70 | position: relative; 71 | width: 65px; 72 | display: inline-block; 73 | } 74 | 75 | .container h3 span:after { 76 | content: ""; 77 | border-bottom: 2px solid #efa032; 78 | position: absolute; 79 | } 80 | 81 | button { 82 | font-family: inherit; 83 | } 84 | 85 | .link { 86 | background: none; 87 | padding: 12px 0px 10px 0px; 88 | border: 1px solid #fff; 89 | outline: 0.3px solid white; 90 | width: 150px; 91 | font-size: 15px; 92 | text-align: center; 93 | margin: 0 auto; 94 | display: block; 95 | margin-bottom: 40px; 96 | margin-top: 25px; 97 | font-weight: 700; 98 | margin: auto; 99 | color: #fff; 100 | top: 0; 101 | bottom: 0; 102 | left: 0; 103 | right: 0; 104 | cursor: pointer; 105 | overflow: hidden; 106 | border-radius: 5px; 107 | box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.5); 108 | } 109 | 110 | .link:hover { 111 | color: #ffbb39; 112 | border-color: #ffbb39; 113 | cursor: pointer; 114 | opacity: 1; 115 | } 116 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "404-templates", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "tsParticles 404 templates", 6 | "keywords": [ 7 | "404", 8 | "templates" 9 | ], 10 | "author": "Matteo Bruni", 11 | "license": "ISC", 12 | "scripts": { 13 | "lint": "eslint --ext .js,.html . --fix", 14 | "lint:ci": "eslint --ext .js,.html .", 15 | "prettier": "prettier --write \"**/*.{js,ts,json,css,scss,html,md}\"", 16 | "prettier:ci": "prettier --check \"**/*.{js,ts,json,css,scss,html,md}\"", 17 | "build": "npm run prettier && npm run lint", 18 | "build:ci": "npm run prettier:ci && npm run lint:ci" 19 | }, 20 | "devDependencies": { 21 | "eslint": "^8.52.0", 22 | "eslint-config-prettier": "^9.0.0", 23 | "eslint-config-standard": "^17.1.0", 24 | "eslint-plugin-html": "^7.1.0", 25 | "eslint-plugin-import": "^2.29.0", 26 | "eslint-plugin-n": "^16.2.0", 27 | "eslint-plugin-prettier": "^5.0.1", 28 | "eslint-plugin-promise": "^6.1.1", 29 | "prettier": "^3.0.3" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /party/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Party | tsParticles 404 5 | 6 | 10 | 11 | 12 | 13 |
14 | 15 |

404

16 |
17 |
18 |

OOPS! Wrong Door

19 |

20 | You can either Join Them or 21 | 27 |

28 | 29 | Dancing Person -1 30 | Dancing Person -2 31 | Dancing Person -3 32 | Dancing Person -4 33 | 34 | 35 | 36 | 40 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /party/images/Dance-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/party/images/Dance-1.gif -------------------------------------------------------------------------------- /party/images/Dance-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/party/images/Dance-2.gif -------------------------------------------------------------------------------- /party/images/Dance-3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/party/images/Dance-3.gif -------------------------------------------------------------------------------- /party/images/Dance-4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/party/images/Dance-4.gif -------------------------------------------------------------------------------- /party/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | overflow: hidden; 4 | } 5 | 6 | body { 7 | background-color: #262327; 8 | height: 500px; 9 | background-position: center; 10 | background-repeat: no-repeat; 11 | background-size: cover; 12 | position: relative; 13 | font-family: "Varela", sans-serif; 14 | height: calc(100%); 15 | } 16 | 17 | #tsparticles { 18 | width: 100%; 19 | height: 100%; 20 | position: absolute; 21 | z-index: -1; 22 | } 23 | 24 | #heading { 25 | align-items: center; 26 | text-align: center; 27 | font-family: "Gemunu Libre", sans-serif; 28 | color: orange; 29 | animation: animate 4s infinite; 30 | font-size: 150px; 31 | } 32 | 33 | #subheading { 34 | bottom: 20%; 35 | position: relative; 36 | color: rgb(255, 7, 106); 37 | align-items: center; 38 | text-align: center; 39 | font-family: "Noto Serif Gujarati", serif; 40 | font-size: 45px; 41 | } 42 | 43 | #subheading1 { 44 | bottom: 19%; 45 | position: relative; 46 | color: rgb(3, 241, 209); 47 | align-items: center; 48 | text-align: center; 49 | font-family: "Noto Serif Gujarati", serif; 50 | } 51 | 52 | .img3 { 53 | position: absolute; 54 | top: 355px; 55 | left: 1%; 56 | height: 300px; 57 | width: auto; 58 | } 59 | 60 | .img2 { 61 | position: absolute; 62 | top: 355px; 63 | left: 29%; 64 | height: 315px; 65 | width: auto; 66 | } 67 | 68 | .img1 { 69 | position: absolute; 70 | top: 355px; 71 | left: 53%; 72 | height: 315px; 73 | width: auto; 74 | } 75 | 76 | .img4 { 77 | position: absolute; 78 | top: 360px; 79 | left: 78%; 80 | height: 300px; 81 | width: auto; 82 | } 83 | 84 | .button-88 { 85 | font-family: "Noto Serif Gujarati", serif; 86 | font-weight: 650; 87 | font-size: 27px; 88 | color: white; 89 | background: #ad5389; 90 | background: linear-gradient(0deg, rgb(170, 6, 192) 0%, rgb(173, 1, 253) 100%); 91 | border: none; 92 | box-shadow: 0 0.7em 1.5em -0.5em #14a73e98; 93 | border-radius: 10em; 94 | cursor: pointer; 95 | user-select: none; 96 | -webkit-user-select: none; 97 | touch-action: manipulation; 98 | } 99 | 100 | .button-88:hover { 101 | box-shadow: 0 0.5em 1.5em -0.5em #14a73e98; 102 | } 103 | 104 | .button-88:active { 105 | box-shadow: 0 0.3em 1em -0.5em #14a73e98; 106 | } 107 | -------------------------------------------------------------------------------- /playful/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | Playful | tsParticles 404 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 | 4 30 | 0 31 | 4 32 |
33 | 34 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /playful/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Catamaran:400,800"); 2 | 3 | #tsparticles { 4 | position: fixed; 5 | width: 100%; 6 | height: 100%; 7 | top: 0; 8 | left: 0; 9 | margin: 0; 10 | } 11 | /* https://codepen.io/ricardpriet/pen/MOKEam */ 12 | .error-container { 13 | color: rgba(0, 0, 0, 0.2); 14 | -webkit-text-stroke: 2px white; 15 | text-align: center; 16 | font-size: 300px; 17 | font-family: "Catamaran", sans-serif; 18 | font-weight: 800; 19 | margin-top: 10%; 20 | } 21 | .error-container > span { 22 | display: inline-block; 23 | line-height: 0.7; 24 | position: relative; 25 | } 26 | .error-container > span > span { 27 | display: inline-block; 28 | position: relative; 29 | } 30 | .error-container > span:nth-of-type(1) { 31 | perspective: 1000px; 32 | perspective-origin: 500% 50%; 33 | } 34 | .error-container > span:nth-of-type(1) > span { 35 | transform-origin: 50% 100% 0px; 36 | transform: rotateX(0); 37 | animation: easyoutelastic 8s infinite; 38 | } 39 | 40 | .error-container > span:nth-of-type(3) { 41 | perspective: none; 42 | perspective-origin: 50% 50%; 43 | } 44 | .error-container > span:nth-of-type(3) > span { 45 | transform-origin: 100% 100% 0px; 46 | transform: rotate(0deg); 47 | animation: rotatedrop 8s infinite; 48 | } 49 | @keyframes easyoutelastic { 50 | 0% { 51 | transform: rotateX(0); 52 | } 53 | 9% { 54 | transform: rotateX(210deg); 55 | } 56 | 13% { 57 | transform: rotateX(150deg); 58 | } 59 | 16% { 60 | transform: rotateX(200deg); 61 | } 62 | 18% { 63 | transform: rotateX(170deg); 64 | } 65 | 20% { 66 | transform: rotateX(180deg); 67 | } 68 | 60% { 69 | transform: rotateX(180deg); 70 | } 71 | 80% { 72 | transform: rotateX(0); 73 | } 74 | 100% { 75 | transform: rotateX(0); 76 | } 77 | } 78 | 79 | @keyframes rotatedrop { 80 | 0% { 81 | transform: rotate(0); 82 | } 83 | 10% { 84 | transform: rotate(30deg); 85 | } 86 | 15% { 87 | transform: rotate(90deg); 88 | } 89 | 70% { 90 | transform: rotate(90deg); 91 | } 92 | 80% { 93 | transform: rotate(0); 94 | } 95 | 100% { 96 | transform: rotateX(0); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /pole/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | Pole | tsParticles 404 19 | 20 | 21 | 22 | 23 |
24 |
25 |

404

26 |

27 | Sorry, The page you're looking for doesn't exist. 28 |

29 | sun 30 | truck 31 |
32 |
33 | 34 |
35 |
36 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /pole/css/404.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | overflow: hidden; 9 | } 10 | 11 | .wrapper { 12 | position: relative; 13 | height: 60vh; 14 | width: 100vw; 15 | background: #10d0f1; 16 | font-family: cursive; 17 | text-align: center; 18 | } 19 | 20 | .wrapper .header { 21 | font-size: 30vh; 22 | color: #ffde55; 23 | } 24 | 25 | .wrapper .description { 26 | color: #ffd735; 27 | } 28 | 29 | .wrapper .sun { 30 | width: 10%; 31 | position: absolute; 32 | top: 5%; 33 | right: 15%; 34 | } 35 | 36 | .wrapper .truck { 37 | width: 100px; 38 | margin-bottom: 3px; 39 | position: absolute; 40 | bottom: -30px; 41 | left: 2%; 42 | transform: translateX(0); 43 | transition: 7s; 44 | } 45 | 46 | .wrapper .truck.gone { 47 | transform: translateX(110vw); 48 | } 49 | 50 | #tsparticles { 51 | position: relative; 52 | width: 100vw; 53 | height: 40vh; 54 | overflow: hidden; 55 | background: linear-gradient(#00cbfd, #0050e4, #0011ac, #000288); 56 | } 57 | 58 | #tsparticles:before { 59 | content: ""; 60 | position: absolute; 61 | top: 0; 62 | left: 0; 63 | width: 100%; 64 | height: 20px; 65 | background: linear-gradient(#f1f1f1, #00cbfd); 66 | } 67 | 68 | #tsparticles .bottle { 69 | position: absolute; 70 | top: 55%; 71 | left: 50%; 72 | transform: translate(-50%, -50%) rotate(300deg); 73 | width: 130px; 74 | height: 50px; 75 | border-radius: 10px 15px 15px 10px; 76 | background: #9cf0ff46; 77 | backdrop-filter: blur(1px); 78 | border: 2px solid #00cbfd; 79 | outline: 0; 80 | color: #f1f1f1; 81 | cursor: pointer; 82 | animation: move 5s linear infinite; 83 | box-shadow: 0 0 10px #f1f1f1 inset; 84 | transition: 0.5s; 85 | } 86 | 87 | #tsparticles .bottle:before { 88 | content: ""; 89 | position: absolute; 90 | width: 25px; 91 | height: 20px; 92 | background: rgb(175, 128, 66); 93 | border-radius: 0px 5px 5px 0px; 94 | right: -27px; 95 | top: 50%; 96 | transform: translateY(-50%); 97 | } 98 | 99 | #tsparticles .bottle:after { 100 | content: ""; 101 | position: absolute; 102 | width: 7px; 103 | height: 7px; 104 | border-radius: 50%; 105 | background: rgba(255, 255, 255, 0.726); 106 | top: 5px; 107 | right: 5px; 108 | transform: skew(10deg, 10deg); 109 | } 110 | 111 | @keyframes move { 112 | 0% { 113 | transform: translate(-50%, -50%) rotate(300deg); 114 | } 115 | 50% { 116 | transform: translate(-40%, -50%) rotate(300deg); 117 | } 118 | 100% { 119 | transform: translate(-50%, -50%) rotate(300deg); 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /pole/image/fish-svgrepo-com (1).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 12 | 16 | 17 | 22 | 23 | 24 | 25 | 27 | 28 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /pole/image/fish-svgrepo-com (11).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 10 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 27 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /pole/image/fish-svgrepo-com (13).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 10 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 27 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /pole/image/fish-svgrepo-com (2).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /pole/image/fish-svgrepo-com (3).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 10 | 11 | 13 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /pole/image/fish-svgrepo-com (4).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 11 | 15 | 18 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /pole/image/fish-svgrepo-com (6).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 10 | 12 | 13 | 15 | 19 | 22 | 26 | 27 | 28 | 29 | 30 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /pole/image/fish-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pole/image/sun-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pole/js/404.js: -------------------------------------------------------------------------------- 1 | const truck = document.querySelector(".truck"); 2 | const bottle = document.querySelector(".bottle"); 3 | 4 | tsParticles.load("tsparticles", { 5 | fullScreen: { 6 | enable: true, 7 | zIndex: 1, 8 | }, 9 | detectRetina: true, 10 | particles: { 11 | move: { 12 | bounce: false, 13 | direction: "right", 14 | enable: true, 15 | outMode: "out", 16 | random: false, 17 | speed: 0.2, 18 | straight: true, 19 | }, 20 | number: { 21 | density: { 22 | enable: true, 23 | area: 800, 24 | }, 25 | limit: 0, 26 | value: 80, 27 | }, 28 | shape: { 29 | character: { 30 | fill: false, 31 | font: "Verdana", 32 | style: "", 33 | value: "*", 34 | weight: "400", 35 | }, 36 | image: [ 37 | { 38 | src: "./image/fish-svgrepo-com.svg", 39 | width: 32, 40 | height: 32, 41 | }, 42 | { 43 | src: "./image/fish-svgrepo-com (1).svg", 44 | width: 32, 45 | height: 32, 46 | }, 47 | { 48 | src: "./image/fish-svgrepo-com (2).svg", 49 | width: 32, 50 | height: 32, 51 | }, 52 | { 53 | src: "./image/fish-svgrepo-com (3).svg", 54 | width: 32, 55 | height: 32, 56 | }, 57 | { 58 | src: "./image/fish-svgrepo-com (4).svg", 59 | width: 32, 60 | height: 32, 61 | }, 62 | { 63 | src: "./image/fish-svgrepo-com (5).svg", 64 | width: 32, 65 | height: 32, 66 | }, 67 | { 68 | src: "./image/fish-svgrepo-com (6).svg", 69 | width: 32, 70 | height: 32, 71 | }, 72 | { 73 | src: "./image/fish-svgrepo-com (7).svg", 74 | width: 32, 75 | height: 32, 76 | }, 77 | { 78 | src: "./image/fish-svgrepo-com (8).svg", 79 | width: 32, 80 | height: 32, 81 | }, 82 | { 83 | src: "./image/fish-svgrepo-com (9).svg", 84 | width: 32, 85 | height: 32, 86 | }, 87 | { 88 | src: "./image/fish-svgrepo-com (10).svg", 89 | width: 32, 90 | height: 32, 91 | }, 92 | { 93 | src: "./image/fish-svgrepo-com (11).svg", 94 | width: 32, 95 | height: 32, 96 | }, 97 | { 98 | src: "./image/fish-svgrepo-com (12).svg", 99 | width: 32, 100 | height: 32, 101 | }, 102 | { 103 | src: "./image/fish-svgrepo-com (13).svg", 104 | width: 32, 105 | height: 32, 106 | }, 107 | { 108 | src: "./image/fish-svgrepo-com (14).svg", 109 | width: 32, 110 | height: 32, 111 | }, 112 | ], 113 | type: "image", 114 | }, 115 | size: { 116 | random: true, 117 | value: 18, 118 | }, 119 | }, 120 | }); 121 | 122 | bottle.addEventListener("click", () => { 123 | truck.classList.add("gone"); 124 | }); 125 | -------------------------------------------------------------------------------- /polygon/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 19 | 20 | Polygon | tsParticles 404 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /polygon/css/404.css: -------------------------------------------------------------------------------- 1 | /* ---- reset ---- */ 2 | html, 3 | body { 4 | height: 100%; 5 | overflow: hidden; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | } 11 | 12 | /* ---- tsparticles container ---- */ 13 | #tsparticles { 14 | position: fixed; 15 | width: 100%; 16 | height: 100%; 17 | } 18 | -------------------------------------------------------------------------------- /polygon/images/404.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /polygon/js/404.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | background: { 3 | color: "#000", 4 | }, 5 | detectRetina: false, 6 | fpsLimit: 60, 7 | interactivity: { 8 | events: { 9 | onHover: { 10 | enable: true, 11 | mode: "bubble", 12 | }, 13 | resize: true, 14 | }, 15 | modes: { 16 | bubble: { 17 | distance: 40, 18 | duration: 2, 19 | opacity: 8, 20 | size: 10, 21 | }, 22 | }, 23 | }, 24 | particles: { 25 | color: { 26 | value: ["#ff0000", "#00ff00", "#0000ff"], 27 | animation: { 28 | enable: true, 29 | speed: 20, 30 | sync: false, 31 | }, 32 | }, 33 | links: { 34 | blink: false, 35 | color: "random", 36 | consent: false, 37 | distance: 75, 38 | enable: true, 39 | opacity: 0.3, 40 | width: 0.5, 41 | }, 42 | move: { 43 | direction: "none", 44 | enable: true, 45 | outModes: { 46 | default: "bounce", 47 | }, 48 | random: false, 49 | speed: { min: 0.5, max: 1 }, 50 | straight: false, 51 | }, 52 | number: { 53 | limit: 0, 54 | value: 400, 55 | }, 56 | opacity: { 57 | animation: { 58 | enable: true, 59 | minimumValue: 0.05, 60 | speed: 2, 61 | sync: false, 62 | }, 63 | value: 1, 64 | }, 65 | shape: { 66 | type: "circle", 67 | }, 68 | size: { 69 | random: { 70 | enable: true, 71 | minimumValue: 3, 72 | }, 73 | value: 5, 74 | }, 75 | }, 76 | polygon: { 77 | draw: { 78 | enable: true, 79 | lineColor: "rgba(255,255,255,0.2)", 80 | lineWidth: 0.3, 81 | }, 82 | move: { 83 | radius: 10, 84 | }, 85 | position: { 86 | y: 105, 87 | x: 130, 88 | }, 89 | inline: { 90 | arrangement: "equidistant", 91 | }, 92 | scale: 3, 93 | type: "inline", 94 | url: "images/404.svg", 95 | }, 96 | }); 97 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": ["config:base"] 4 | } 5 | -------------------------------------------------------------------------------- /restriction/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | 20 | 21 | 22 | 404 Not found 23 | 27 | 28 | 29 | 30 | 31 |
32 |
33 |

404

34 |

This page does not exist.

35 |
36 | 37 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /restriction/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono"); 2 | body { 3 | margin: 0; 4 | font: 5 | normal 75% Arial, 6 | Helvetica, 7 | sans-serif; 8 | } 9 | canvas { 10 | display: block; 11 | } 12 | /* ---- tsparticles container ---- */ 13 | #tsparticles { 14 | position: absolute; 15 | width: 100%; 16 | height: 100%; 17 | background-color: #000000; 18 | background-repeat: no-repeat; 19 | background-size: cover; 20 | background-position: 50% 50%; 21 | } 22 | .text-center { 23 | position: absolute; 24 | width: 30rem; 25 | border-radius: 2rem; 26 | height: 20rem; 27 | top: calc((100% - 20rem) / 2); 28 | text-align: center; 29 | border: 10px solid white; 30 | left: calc((100% - 30rem) / 2); 31 | color: white; 32 | padding: 1rem; 33 | background-color: #000000; 34 | } 35 | .text-center h1 { 36 | font-size: 11em; 37 | } 38 | .text-center h2 { 39 | font-family: "Roboto Mono", sans-serif; 40 | font-size: 2rem; 41 | margin: 0%; 42 | } 43 | -------------------------------------------------------------------------------- /restriction/js/404.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | fpsLimit: 60, 3 | particles: { 4 | number: { 5 | value: 15, 6 | density: { 7 | enable: true, 8 | value_area: 800, 9 | }, 10 | }, 11 | color: { 12 | value: "#ffffff", 13 | }, 14 | shape: { 15 | type: ["circle"], 16 | }, 17 | opacity: { 18 | value: 1, 19 | }, 20 | size: { 21 | value: 8, 22 | random: { 23 | enable: true, 24 | minimumValue: 4, 25 | }, 26 | }, 27 | rotate: { 28 | value: 20, 29 | direction: "clockwise", 30 | animation: { 31 | speed: 5, 32 | enable: true, 33 | }, 34 | }, 35 | move: { 36 | enable: true, 37 | speed: 6, 38 | direction: "none", 39 | out_mode: "out", 40 | trail: { 41 | enable: true, 42 | length: 25, 43 | }, 44 | }, 45 | }, 46 | interactivity: { 47 | detectsOn: "canvas", 48 | events: { 49 | onDiv: { 50 | enable: true, 51 | mode: "bounce", 52 | selectors: "#givemelight", 53 | type: "rectangle", 54 | }, 55 | resize: true, 56 | }, 57 | modes: { 58 | light: { 59 | area: { 60 | gradient: { 61 | start: "3b5e98", 62 | stop: "#17163e", 63 | }, 64 | }, 65 | shadow: { 66 | color: "#17163e", 67 | }, 68 | }, 69 | }, 70 | }, 71 | detectRetina: true, 72 | background: { 73 | // image: "url('https://wallpaperaccess.com/full/1268171.jpg')", 74 | color: "#000000", 75 | }, 76 | }); 77 | -------------------------------------------------------------------------------- /simple/400.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 19 | 20 | Simple | tsParticles 404 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

400

29 |

BAD REQUEST

30 |
31 |
32 | 33 | GO BACK 34 | 35 |
36 | 37 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /simple/401.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 19 | 20 | Simple | tsParticles 404 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

401

29 |

UNAUTHORIZED

30 |
31 |
32 | 33 | GO BACK 34 | 35 |
36 | 37 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /simple/403.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 19 | 20 | Simple | tsParticles 404 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

403

29 |

FORBIDDEN

30 |
31 |
32 | 33 | GO BACK 34 | 35 |
36 | 37 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /simple/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 19 | 20 | Simple | tsParticles 404 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

404

29 |

NOT FOUND

30 |
31 |
32 | 33 | GO BACK 34 | 35 |
36 | 37 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /simple/500.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 19 | 20 | Simple | tsParticles 404 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

500

29 |

SERVER ERROR

30 |
31 |
32 | 33 | GO BACK 34 | 35 |
36 | 37 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /simple/css/errors.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | overflow: hidden; 5 | } 6 | 7 | .error-page { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | text-align: center; 12 | height: 100%; 13 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 14 | } 15 | 16 | .error-page h1 { 17 | font-size: 30vh; 18 | font-weight: bold; 19 | position: relative; 20 | margin: -8vh 0 0; 21 | padding: 0; 22 | } 23 | 24 | .error-page h1:after { 25 | content: attr(data-h1); 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | right: 0; 30 | color: transparent; 31 | /* webkit only for graceful degradation to IE */ 32 | background: -webkit-repeating-linear-gradient( 33 | -45deg, 34 | #71b7e6, 35 | #69a6ce, 36 | #b98acc, 37 | #ee8176, 38 | #b98acc, 39 | #69a6ce, 40 | #9b59b6 41 | ); 42 | -webkit-background-clip: text; 43 | -webkit-text-fill-color: transparent; 44 | background-size: 400%; 45 | text-shadow: 1px 1px 2px transparentize(#fff, 0.75); 46 | animation: animateTextBackground 10s ease-in-out infinite; 47 | } 48 | 49 | .error-page h1 + p { 50 | color: #d6d6d6; 51 | font-size: 8vh; 52 | font-weight: bold; 53 | line-height: 10vh; 54 | max-width: 600px; 55 | position: relative; 56 | } 57 | 58 | .error-page h1 + p:after { 59 | content: attr(data-p); 60 | position: absolute; 61 | top: 0; 62 | left: 0; 63 | right: 0; 64 | color: transparent; 65 | text-shadow: 1px 1px 2px transparentize(#fff, 0.5); 66 | -webkit-background-clip: text; 67 | -moz-background-clip: text; 68 | background-clip: text; 69 | } 70 | 71 | #tsparticles { 72 | position: fixed; 73 | top: 0; 74 | right: 0; 75 | bottom: 0; 76 | left: 0; 77 | } 78 | 79 | @keyframes animateTextBackground { 80 | 0% { 81 | background-position: 0 0; 82 | } 83 | 84 | 25% { 85 | background-position: 100% 0; 86 | } 87 | 88 | 50% { 89 | background-position: 100% 100%; 90 | } 91 | 92 | 75% { 93 | background-position: 0 100%; 94 | } 95 | 96 | 100% { 97 | background-position: 0 0; 98 | } 99 | } 100 | 101 | @media (max-width: 767px) { 102 | .error-page h1 { 103 | font-size: 32vw; 104 | } 105 | 106 | .error-page h1 + p { 107 | font-size: 8vw; 108 | line-height: 10vw; 109 | max-width: 70vw; 110 | } 111 | } 112 | 113 | a.back { 114 | position: fixed; 115 | right: 40px; 116 | bottom: 40px; 117 | background: -webkit-repeating-linear-gradient( 118 | -45deg, 119 | #71b7e6, 120 | #69a6ce, 121 | #b98acc, 122 | #ee8176 123 | ); 124 | border-radius: 5px; 125 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 126 | color: #fff; 127 | font-size: 16px; 128 | font-weight: bold; 129 | line-height: 24px; 130 | padding: 15px 30px; 131 | text-decoration: none; 132 | transition: 0.25s all ease-in-out; 133 | } 134 | 135 | a.back:hover { 136 | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); 137 | } 138 | -------------------------------------------------------------------------------- /simple/js/errors.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | fpsLimit: 60, 3 | particles: { 4 | number: { 5 | value: 5, 6 | density: { 7 | enable: true, 8 | area: 800, 9 | }, 10 | }, 11 | color: { 12 | value: "#fcfcfc", 13 | }, 14 | shape: { 15 | type: "circle", 16 | }, 17 | opacity: { 18 | value: 0.5, 19 | random: { 20 | enable: true, 21 | minimumValue: 0.1, 22 | }, 23 | }, 24 | size: { 25 | value: 140, 26 | random: { 27 | enable: true, 28 | minimumValue: 40, 29 | }, 30 | animation: { 31 | enable: true, 32 | speed: 10, 33 | minimumValue: 40, 34 | sync: false, 35 | }, 36 | }, 37 | move: { 38 | enable: true, 39 | speed: 4, 40 | direction: "none", 41 | random: false, 42 | straight: false, 43 | outModes: { 44 | default: "out", 45 | }, 46 | }, 47 | }, 48 | interactivity: { 49 | detectsOn: "canvas", 50 | events: { 51 | resize: true, 52 | }, 53 | }, 54 | detectRetina: true, 55 | }); 56 | -------------------------------------------------------------------------------- /snowfall/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | Snowfall | tsParticles 404 20 | 21 | 25 | 26 | 27 | 28 |
29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 |

404.

37 |

Sorry, Wrong Door.

38 |
39 | 40 |

41 | Don't worry, sometimes even we make mistakes. You can find plenty of 42 | other things on our homepage. 43 |

44 | 45 | 46 |
47 |
48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /snowfall/css/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | overflow: hidden; 4 | } 5 | 6 | body { 7 | background: #999999; 8 | font-family: "Varela", sans-serif; 9 | height: calc(100%); 10 | overflow: auto; 11 | position: relative; 12 | } 13 | 14 | #tsparticles { 15 | width: 100%; 16 | height: 100%; 17 | position: absolute; 18 | z-index: -1; 19 | } 20 | .images { 21 | text-align: center; 22 | width: 50%; 23 | height: auto; 24 | margin-top: 20%; 25 | opacity: 80%; 26 | } 27 | #cup { 28 | width: 125px; 29 | height: auto; 30 | margin-bottom: 5%; 31 | } 32 | 33 | #cat { 34 | width: 300px; 35 | height: auto; 36 | } 37 | .para { 38 | text-align: center; 39 | width: 50%; 40 | height: auto; 41 | } 42 | h2 { 43 | font-size: 100px; 44 | opacity: 40%; 45 | } 46 | 47 | h3 { 48 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 49 | font-size: 40px; 50 | opacity: 60%; 51 | } 52 | p { 53 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 54 | font-size: 24px; 55 | } 56 | 57 | button { 58 | opacity: 50%; 59 | font-size: 17px; 60 | background-color: #cccccc; 61 | padding: 3%; 62 | margin-top: 5%; 63 | font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 64 | } 65 | -------------------------------------------------------------------------------- /snowfall/images/starburst_white_300_drop_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/snowfall/images/starburst_white_300_drop_2.png -------------------------------------------------------------------------------- /snowfall/js/app.js: -------------------------------------------------------------------------------- 1 | tsParticles.load("tsparticles", { 2 | particles: { 3 | number: { 4 | value: 350, 5 | density: { 6 | enable: true, 7 | value_area: 600, 8 | }, 9 | }, 10 | color: { 11 | value: "#ffffff", 12 | }, 13 | shape: { 14 | type: "image", 15 | stroke: { 16 | width: 2, 17 | color: "#fff", 18 | }, 19 | polygon: { 20 | nb_sides: 6, 21 | }, 22 | image: { 23 | src: "images/starburst_white_300_drop_2.png", 24 | width: 10, 25 | height: 10, 26 | }, 27 | }, 28 | opacity: { 29 | value: 0.5, 30 | random: false, 31 | anim: { 32 | enable: false, 33 | speed: 2, 34 | opacity_min: 0.2, 35 | sync: false, 36 | }, 37 | }, 38 | size: { 39 | value: 5, 40 | random: true, 41 | anim: { 42 | enable: false, 43 | speed: 20, 44 | size_min: 0.1, 45 | sync: false, 46 | }, 47 | }, 48 | line_linked: { 49 | enable: false, 50 | distance: 50, 51 | color: "#ffffff", 52 | opacity: 0.5, 53 | width: 1, 54 | }, 55 | move: { 56 | enable: true, 57 | speed: { min: 1, max: 3 }, 58 | direction: "bottom", 59 | straight: false, 60 | out_mode: "out", 61 | bounce: false, 62 | }, 63 | }, 64 | interactivity: { 65 | detect_on: "canvas", 66 | events: { 67 | onhover: { 68 | enable: true, 69 | mode: "bubble", 70 | }, 71 | onclick: { 72 | enable: true, 73 | mode: "repulse", 74 | }, 75 | resize: true, 76 | }, 77 | modes: { 78 | grab: { 79 | distance: 125, 80 | line_linked: { 81 | opacity: 1, 82 | }, 83 | }, 84 | bubble: { 85 | distance: 200, 86 | size: 33, 87 | duration: 2, 88 | opacity: 6, 89 | speed: 2, 90 | }, 91 | repulse: { 92 | distance: 200, 93 | duration: 0.25, 94 | }, 95 | push: { 96 | particles_nb: 4, 97 | }, 98 | remove: { 99 | particles_nb: 2, 100 | }, 101 | }, 102 | }, 103 | retina_detect: true, 104 | }); 105 | -------------------------------------------------------------------------------- /space/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | Space | tsParticles 404 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |

404

28 |

29 | LOST IN SPACE App-Name? Hmm, looks like that page doesn't 30 | exist. 31 |

32 | 33 | 34 | 35 |
36 | 37 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /space/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Dosis:300,400,700,800"); 2 | 3 | /** Styles for the 403 Page **/ 4 | 5 | .particle-error, 6 | .permission_denied, 7 | #tsparticles { 8 | width: 100%; 9 | height: 100%; 10 | margin: 0px !important; 11 | } 12 | 13 | #tsparticles { 14 | position: fixed !important; 15 | opacity: 0.23; 16 | } 17 | 18 | .permission_denied { 19 | background: #24344c !important; 20 | } 21 | 22 | .permission_denied a { 23 | text-decoration: none; 24 | } 25 | 26 | .denied__wrapper { 27 | max-width: 390px; 28 | width: 100%; 29 | height: 390px; 30 | display: block; 31 | margin: 0 auto; 32 | position: relative; 33 | margin-top: 8vh; 34 | } 35 | 36 | .permission_denied h1 { 37 | text-align: center; 38 | color: #fff; 39 | font-family: "Dosis", sans-serif; 40 | font-size: 100px; 41 | margin-bottom: 0px; 42 | font-weight: 800; 43 | } 44 | 45 | .permission_denied h3 { 46 | text-align: center; 47 | color: #fff; 48 | font-size: 19px; 49 | line-height: 23px; 50 | max-width: 330px; 51 | margin: 0px auto 30px auto; 52 | font-family: "Dosis", sans-serif; 53 | font-weight: 400; 54 | } 55 | 56 | .permission_denied h3 span { 57 | position: relative; 58 | width: 65px; 59 | display: inline-block; 60 | } 61 | 62 | .permission_denied h3 span:after { 63 | content: ""; 64 | border-bottom: 3px solid #ffbb39; 65 | position: absolute; 66 | left: 0; 67 | top: 43%; 68 | width: 100%; 69 | } 70 | 71 | .denied__link { 72 | background: none; 73 | color: #fff; 74 | padding: 12px 0px 10px 0px; 75 | border: 1px solid #fff; 76 | outline: none; 77 | border-radius: 7px; 78 | width: 150px; 79 | font-size: 15px; 80 | text-align: center; 81 | margin: 0 auto; 82 | vertical-align: middle; 83 | display: block; 84 | margin-bottom: 40px; 85 | margin-top: 25px; 86 | font-family: "Dosis", sans-serif; 87 | font-weight: 400; 88 | } 89 | 90 | .denied__link:hover { 91 | color: #ffbb39; 92 | border-color: #ffbb39; 93 | cursor: pointer; 94 | opacity: 1; 95 | } 96 | 97 | .permission_denied .stars { 98 | animation: sparkle 1.6s infinite ease-in-out alternate; 99 | } 100 | 101 | @keyframes sparkle { 102 | 0% { 103 | opacity: 1; 104 | } 105 | 100% { 106 | opacity: 0.3; 107 | } 108 | } 109 | 110 | #astronaut { 111 | width: 43px; 112 | position: absolute; 113 | right: 20px; 114 | top: 210px; 115 | animation: spin 4.5s infinite linear; 116 | } 117 | 118 | @keyframes spin { 119 | 0% { 120 | transform: rotateZ(0deg); 121 | } 122 | 100% { 123 | transform: rotateZ(360deg); 124 | } 125 | } 126 | 127 | @media (max-width: 600px) { 128 | .permission_denied h1 { 129 | font-size: 75px; 130 | } 131 | .permission_denied h3 { 132 | font-size: 16px; 133 | width: 200px; 134 | margin: 0 auto; 135 | line-height: 23px; 136 | } 137 | .permission_denied h3 span { 138 | width: 60px; 139 | } 140 | #astronaut { 141 | width: 35px; 142 | right: 40px; 143 | top: 170px; 144 | } 145 | } 146 | 147 | .saturn, 148 | .saturn-2, 149 | .hover { 150 | animation: hover 2s infinite ease-in-out alternate; 151 | } 152 | 153 | @keyframes hover { 154 | 0% { 155 | transform: translateY(3px); 156 | } 157 | 100% { 158 | transform: translateY(-3px); 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /space/js/404.js: -------------------------------------------------------------------------------- 1 | const particles = { 2 | fpsLimit: 60, 3 | particles: { 4 | number: { 5 | value: 160, 6 | density: { 7 | enable: true, 8 | area: 800, 9 | }, 10 | }, 11 | color: { 12 | value: "#ffffff", 13 | }, 14 | shape: { 15 | type: "circle", 16 | }, 17 | opacity: { 18 | value: 1, 19 | random: { 20 | enable: true, 21 | minimumValue: 0.1, 22 | }, 23 | animation: { 24 | enable: true, 25 | speed: 1, 26 | minimumValue: 0, 27 | sync: false, 28 | }, 29 | }, 30 | size: { 31 | value: 3, 32 | random: { 33 | enable: true, 34 | minimumValue: 1, 35 | }, 36 | }, 37 | move: { 38 | enable: true, 39 | speed: 0.17, 40 | direction: "none", 41 | random: true, 42 | straight: false, 43 | outModes: { 44 | default: "out", 45 | }, 46 | }, 47 | }, 48 | interactivity: { 49 | detectsOn: "canvas", 50 | events: { 51 | resize: false, 52 | }, 53 | }, 54 | detectRetina: true, 55 | }; 56 | 57 | tsParticles.load("tsparticles", particles); 58 | -------------------------------------------------------------------------------- /spooky/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 19 | 20 | Spooky | tsParticles 404 21 | 22 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | 35 |
36 |

...and when the coffin was finally opened...

37 |

😱 they screamed! 😱

38 |

because there was

39 |

404 NOTHING

40 |

It was too late: the page has been eaten by some spooky creatures.

41 | 46 |
47 | 48 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /spooky/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Creepster"); 2 | 3 | /** Styles for the 404 Page **/ 4 | 5 | .particle-error, 6 | .black_coven, 7 | #tsparticles { 8 | width: 100%; 9 | height: 100%; 10 | background-color: black; 11 | margin: 0px !important; 12 | } 13 | 14 | #tsparticles { 15 | position: fixed !important; 16 | opacity: 0.33; 17 | } 18 | 19 | .spooky_message { 20 | color: #990909; 21 | max-width: 390px; 22 | width: 100%; 23 | height: 390px; 24 | display: block; 25 | margin: 0 auto; 26 | position: relative; 27 | margin-top: 8vh; 28 | font-family: "Creepster", sans-serif; 29 | } 30 | 31 | .spooky_message p { 32 | text-align: center; 33 | } 34 | 35 | .spooky_message h1, 36 | h2, 37 | h3, 38 | p { 39 | background-color: rgba(0, 0, 0, 0.4); 40 | border-radius: 0.2em; 41 | } 42 | 43 | .spooky_message h1 { 44 | text-align: center; 45 | color: #ff5733; 46 | font-weight: bolder; 47 | font-size: 6em; 48 | margin-bottom: 0px; 49 | margin-top: 0.2em; 50 | font-weight: 800; 51 | } 52 | 53 | .spooky_message h2 { 54 | text-align: center; 55 | text-decoration: double; 56 | font-style: italic; 57 | } 58 | 59 | .spooky_message h3 { 60 | text-align: center; 61 | font-size: 19px; 62 | line-height: 23px; 63 | max-width: 330px; 64 | margin: 0px auto 30px auto; 65 | font-weight: 400; 66 | } 67 | 68 | .spooky_link { 69 | background: none; 70 | color: #fff; 71 | padding: 12px 0px 10px 0px; 72 | outline: none; 73 | border-radius: 7px; 74 | width: 150px; 75 | font-size: 15px; 76 | text-align: center; 77 | margin: 0 auto; 78 | display: block; 79 | margin-bottom: 40px; 80 | margin-top: 25px; 81 | font-weight: 400; 82 | } 83 | 84 | .spooky_link:hover { 85 | color: #ffbb39; 86 | border-color: #ffbb39; 87 | cursor: pointer; 88 | opacity: 1; 89 | } 90 | -------------------------------------------------------------------------------- /spooky/js/404.js: -------------------------------------------------------------------------------- 1 | const particles = { 2 | fpsLimit: 60, 3 | 4 | pauseOnBlur: true, 5 | particles: { 6 | number: { 7 | value: 33, 8 | density: { 9 | enable: true, 10 | area: 800, 11 | }, 12 | }, 13 | shape: { 14 | type: "character", 15 | character: { 16 | value: ["🦇", "💀", "👻", "🕸️", "🕷️"], 17 | }, 18 | }, 19 | size: { 20 | value: 30, 21 | random: { 22 | enable: true, 23 | minimumValue: 10, 24 | }, 25 | }, 26 | move: { 27 | enable: true, 28 | speed: 28.8, 29 | direction: "outside", 30 | straight: true, 31 | outModes: { 32 | default: "out", 33 | }, 34 | }, 35 | }, 36 | detectRetina: true, 37 | }; 38 | 39 | tsParticles.load("tsparticles", particles); 40 | -------------------------------------------------------------------------------- /starwars/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 17 | 18 | 404 | Star Wars Error 19 | 20 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 |

404 WARS!

33 |

The Force is not with you

34 |

It seems the page you are looking for is lost in the galaxy...

35 | Return to Home 36 |
37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /starwars/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | overflow: hidden; 5 | background: #000; 6 | color: #fff; 7 | font-family: "Star Wars", sans-serif; 8 | } 9 | 10 | #tsparticles { 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | width: 100%; 15 | height: 100%; 16 | z-index: -1; 17 | } 18 | 19 | .error-container { 20 | text-align: center; 21 | position: absolute; 22 | top: 50%; 23 | left: 50%; 24 | transform: translate(-50%, -50%); 25 | padding: 20px; 26 | } 27 | 28 | .error-container h1 { 29 | font-size: 10em; 30 | color: #ffcc00; 31 | margin: 0; 32 | text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.8); 33 | } 34 | 35 | .error-container h2 { 36 | font-size: 2em; 37 | color: #ffffff; 38 | margin: 10px 0; 39 | text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6); 40 | } 41 | 42 | .error-container p { 43 | font-size: 1.2em; 44 | color: #cccccc; 45 | margin: 20px 0; 46 | text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.4); 47 | } 48 | 49 | .home-button { 50 | display: inline-block; 51 | padding: 10px 20px; 52 | font-size: 1.2em; 53 | color: #fff; 54 | background-color: #ffcc00; /* Classic Star Wars yellow */ 55 | text-decoration: none; 56 | border-radius: 5px; 57 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); 58 | transition: 59 | background-color 0.3s, 60 | box-shadow 0.3s; 61 | } 62 | 63 | .home-button:hover { 64 | background-color: #e0b600; 65 | box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4); 66 | } 67 | -------------------------------------------------------------------------------- /starwars/image/deadstar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/starwars/image/deadstar.png -------------------------------------------------------------------------------- /starwars/image/ship1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/starwars/image/ship1.png -------------------------------------------------------------------------------- /starwars/image/ship2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/starwars/image/ship2.png -------------------------------------------------------------------------------- /starwars/image/ship3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsparticles/404-templates/866c699e70ecd20d314dc7c3f55a1fab2d36fd37/starwars/image/ship3.png -------------------------------------------------------------------------------- /starwars/js/script.js: -------------------------------------------------------------------------------- 1 | const particles = { 2 | fpsLimit: 60, 3 | particles: { 4 | number: { 5 | value: 300, 6 | density: { 7 | enable: true, 8 | area: 800, 9 | }, 10 | }, 11 | color: { 12 | value: ["#ffffff", "#ffcc00", "#ff0000", "#00ff00", "#0000ff"], 13 | animation: { 14 | enable: true, 15 | speed: 20, 16 | sync: true, 17 | }, 18 | }, 19 | shape: { 20 | type: "image", 21 | image: [ 22 | { 23 | src: "./image/deadstar.png", 24 | width: 100, 25 | height: 100, 26 | }, 27 | { 28 | src: "./image/ship1.png", 29 | width: 100, 30 | height: 100, 31 | }, 32 | { 33 | src: "./image/ship2.png", 34 | width: 100, 35 | height: 100, 36 | }, 37 | { 38 | src: "./image/ship3.png", 39 | width: 100, 40 | height: 100, 41 | }, 42 | ], 43 | }, 44 | size: { 45 | value: 25, 46 | random: { 47 | enable: true, 48 | minimumValue: 3, 49 | }, 50 | }, 51 | move: { 52 | enable: true, 53 | speed: 1.5, 54 | direction: "none", 55 | outModes: { 56 | default: "out", 57 | }, 58 | path: { 59 | delay: { 60 | value: 0.2, 61 | }, 62 | generator: (particle, time) => { 63 | const angle = time / 1000; 64 | const radius = 200; 65 | return { 66 | x: Math.cos(angle) * radius, 67 | y: Math.sin(angle) * radius, 68 | }; 69 | }, 70 | }, 71 | }, 72 | opacity: { 73 | value: 0.8, 74 | random: { 75 | enable: true, 76 | minimumValue: 0.4, 77 | }, 78 | }, 79 | }, 80 | detectRetina: true, 81 | }; 82 | 83 | tsParticles.load("tsparticles", particles); 84 | -------------------------------------------------------------------------------- /sweep.yaml: -------------------------------------------------------------------------------- 1 | # Sweep AI turns bugs & feature requests into code changes (https://sweep.dev) 2 | # For details on our config file, check out our docs at https://docs.sweep.dev/usage/config 3 | 4 | # This setting contains a list of rules that Sweep will check for. If any of these rules are broken in a new commit, Sweep will create an pull request to fix the broken rule. 5 | rules: 6 | - "All docstrings and comments should be up to date." 7 | - "There should be no instances of commented out code." 8 | - "All error logs should use traceback during exceptions." 9 | - "There should be no instances of `import pdb; pdb.set_trace()` in production code." 10 | - "There should be no debug log or print statements in production code." 11 | - "All CSS files should be linked using the `href` attribute." 12 | 13 | # This is the branch that Sweep will develop from and make pull requests to. Most people use 'main' or 'master' but some users also use 'dev' or 'staging'. 14 | branch: 'main' 15 | 16 | # By default Sweep will read the logs and outputs from your existing Github Actions. To disable this, set this to false. 17 | gha_enabled: True 18 | 19 | # This is the description of your project. It will be used by sweep when creating PRs. You can tell Sweep what's unique about your project, what frameworks you use, or anything else you want. 20 | # 21 | # Example: 22 | # 23 | # description: sweepai/sweep is a python project. The main api endpoints are in sweepai/api.py. Write code that adheres to PEP8. 24 | description: '' 25 | 26 | # This sets whether to create pull requests as drafts. If this is set to True, then all pull requests will be created as drafts and GitHub Actions will not be triggered. 27 | draft: False 28 | 29 | # This is a list of directories that Sweep will not be able to edit. 30 | blocked_dirs: [] 31 | 32 | # This is a list of documentation links that Sweep will use to help it understand your code. You can add links to documentation for any packages you use here. 33 | # 34 | # Example: 35 | # 36 | # docs: 37 | # - PyGitHub: ["https://pygithub.readthedocs.io/en/latest/", "We use pygithub to interact with the GitHub API"] 38 | docs: [] 39 | 40 | # Sandbox executes commands in a sandboxed environment to validate code changes after every edit to guarantee pristine code. For more details, see the [Sandbox](./sandbox) page. 41 | sandbox: 42 | install: 43 | - trunk init 44 | check: 45 | - trunk fmt {file_path} 46 | - trunk check --fix --print-failures {file_path} 47 | -------------------------------------------------------------------------------- /traveller/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | Traveller | tsParticles 404 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |

404

28 |

No worries traveller, this way.

29 | 30 |
31 | 32 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /traveller/css/404.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Silkscreen&display=swap"); 2 | .particle-error, 3 | .wrapper, 4 | #tsparticles { 5 | width: 100%; 6 | height: 100%; 7 | margin: 0px; 8 | margin-top: -70px; 9 | } 10 | 11 | #tsparticles { 12 | position: fixed !important; 13 | opacity: 0.23; 14 | } 15 | 16 | .wrapper { 17 | background: #002c37 !important; 18 | } 19 | 20 | .wrapper a { 21 | text-decoration: none; 22 | } 23 | 24 | .denied__wrapper { 25 | width: 100%; 26 | display: block; 27 | margin: 0 auto; 28 | position: relative; 29 | margin-top: 8vh; 30 | } 31 | 32 | .wrapper h1 { 33 | text-align: center; 34 | color: #007ab8; 35 | font-family: "Silkscreen", sans-serif; 36 | font-size: 200px; 37 | margin-bottom: 0px; 38 | } 39 | 40 | .wrapper h3 { 41 | text-align: center; 42 | color: #f00a20; 43 | font-size: 19px; 44 | line-height: 23px; 45 | max-width: 530px; 46 | margin: 0px auto 30px auto; 47 | font-family: "Silkscreen", sans-serif; 48 | } 49 | 50 | .denied__link { 51 | background: none; 52 | color: #4d8800; 53 | padding: 12px 0px 10px 0px; 54 | border: 1px solid #4d8800; 55 | outline: none; 56 | border-radius: 7px; 57 | width: 250px; 58 | font-size: 15px; 59 | text-align: center; 60 | margin: 0 auto; 61 | vertical-align: middle; 62 | display: block; 63 | margin-bottom: 40px; 64 | margin-top: 25px; 65 | font-family: "Dosis", sans-serif; 66 | font-weight: 400; 67 | } 68 | 69 | .denied__link:hover { 70 | color: #ffbb39; 71 | border-color: #ffbb39; 72 | cursor: pointer; 73 | opacity: 1; 74 | } 75 | 76 | .wrapper .stars { 77 | animation: sparkle 1.6s infinite ease-in-out alternate; 78 | } 79 | 80 | @keyframes sparkle { 81 | 0% { 82 | opacity: 1; 83 | } 84 | 100% { 85 | opacity: 0.3; 86 | } 87 | } 88 | 89 | @keyframes spin { 90 | 0% { 91 | transform: rotateZ(0deg); 92 | } 93 | 100% { 94 | transform: rotateZ(360deg); 95 | } 96 | } 97 | 98 | @media (max-width: 600px) { 99 | .wrapper h1 { 100 | font-size: 75px; 101 | } 102 | .wrapper h3 { 103 | font-size: 16px; 104 | width: 200px; 105 | margin: 0 auto; 106 | line-height: 23px; 107 | } 108 | .wrapper h3 span { 109 | width: 60px; 110 | } 111 | } 112 | 113 | .hover { 114 | animation: hover 2s infinite ease-in-out alternate; 115 | } 116 | 117 | @keyframes hover { 118 | 0% { 119 | transform: translateY(3px); 120 | } 121 | 100% { 122 | transform: translateY(-3px); 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /traveller/js/404.js: -------------------------------------------------------------------------------- 1 | const particles = { 2 | fpsLimit: 120, 3 | particles: { 4 | number: { 5 | value: 3, 6 | density: { 7 | enable: true, 8 | area: 100, 9 | }, 10 | }, 11 | color: { 12 | value: "#008781", 13 | }, 14 | shape: { 15 | type: "circle", 16 | }, 17 | opacity: { 18 | value: 1, 19 | random: { 20 | enable: true, 21 | minimumValue: 0.1, 22 | }, 23 | animation: { 24 | enable: true, 25 | speed: 1, 26 | minimumValue: 0, 27 | sync: false, 28 | }, 29 | }, 30 | size: { 31 | value: 50, 32 | random: { 33 | enable: true, 34 | minimumValue: 15, 35 | }, 36 | }, 37 | move: { 38 | enable: true, 39 | speed: 17, 40 | direction: "down", 41 | random: false, 42 | straight: true, 43 | outModes: { 44 | default: "out", 45 | }, 46 | }, 47 | }, 48 | interactivity: { 49 | detectsOn: "canvas", 50 | events: { 51 | resize: false, 52 | }, 53 | }, 54 | detectRetina: true, 55 | }; 56 | 57 | tsParticles.load("tsparticles", particles); 58 | -------------------------------------------------------------------------------- /wholesome/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 19 | Wholesome | tsParticles 404 20 | 21 | 22 | 23 | 24 |
25 | 26 |
27 |
28 |

404

29 |

Aww, the page doesn't exist

30 |
31 | 32 |
33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /wholesome/css/app.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap"); 2 | html { 3 | height: 100%; 4 | overflow: hidden; 5 | } 6 | 7 | body { 8 | background: #ffefa8; 9 | font-family: "Henny Penny", cursive; 10 | color: rgb(153, 100, 252); 11 | height: calc(100%); 12 | overflow: auto; 13 | position: relative; 14 | text-align: center; 15 | } 16 | 17 | #tsparticles { 18 | width: 100%; 19 | height: 100%; 20 | position: absolute; 21 | z-index: -1; 22 | } 23 | 24 | .cont { 25 | width: 100%; 26 | height: auto; 27 | /* margin-top: 4rem; */ 28 | background-color: rgba(255, 255, 255, 0.767); 29 | width: max-content; 30 | margin: 2em auto; 31 | padding: 1.5em; 32 | font-size: 5vh; 33 | border-radius: 10%; 34 | backdrop-filter: blur(10px); 35 | } 36 | 37 | a { 38 | text-decoration: none; 39 | } 40 | .button { 41 | background-color: hsl(276, 97%, 61%); 42 | color: rgb(255, 255, 255); 43 | padding: 0.7em; 44 | border-radius: 1em; 45 | font-size: 3vh; 46 | border: none; 47 | text-align: center; 48 | margin: 0 auto; 49 | display: block; 50 | margin-bottom: 40px; 51 | margin-top: 25px; 52 | font-family: "Henny Penny", sans-serif; 53 | } 54 | 55 | .button:hover { 56 | cursor: pointer; 57 | opacity: 1; 58 | } 59 | --------------------------------------------------------------------------------