NPM package: a 3D rolling sphere of words following your mouse movements

Overview

wordsphere

NPM package: a 3D rolling sphere of words following your mouse movements.

Compatible with Vue JS.

PREVIEW

Preview GIF

FEATURES

Words of your chosing are spread around a fully customizable sphere.
The sphere is activated when the user's mouse enters its bounding square, and will rotate towards the direction given by the mouse.
When the mouse leaves the component's bounding square, movement will gradually slow down.
You can also make the sphere move on its own with just a few tweaks (detailled below)

INSTALLATION

npm i wordsphere

(TODO: instructions for Nuxt JS)

HOW TO USE

BASICS

Add this code to the <script> part of your Vue file

import WordSphere from 'wordsphere';

export default {
  components: {
    WordSphere
  }
}

And, in the HTML part, add it almost like any other Vue component, just with a few twists:

<WordSphere :items_list="['Your', 'words', 'here', 'make', 'that', 'list', 'long', 'if', 'you', 'want']"/>

We will discuss the input props of the component in more details below, but items_list is non-optional.


CUSTOMIZE WITH INPUT PROPERTIES / PROPS

Here is the full list of props you can customize:

1. items_list

Type: Array
Array of strings, the list of words you want to include in the sphere

2. radius

Type: Number
Unit: REM
Radius of the sphere

3. text_color

Type: String
Color of the words in the sphere

4. font_size_max

Type: Number
Unit: REM
Font size when a word is at the closest point to the user.
NOTE: the font size of words furthest behind will be half of that

5. blur_max

Type: Number
Unit: REM
Blur when a word is at the furthest point from user

6. update_interval

Type: Number
Unit: milliseconds
IMPORTANT: change THIS prop to modify movement speed. The lower the interval, the faster

7. extra_padding

Type: Number
Unit: REM
Padding around the sphere, in which mouse movement is still listened to


Overall, if you want to specify all props, this would be the result when calling the component:

<WordSphere 
	:items_list="['Your', 'words', 'here', 'make', 'that', 'list', 'long', 'if', 'you', 'want']"
	:radius="12
	:text_color="'#00FFEA'"
	:font_size_max="2"
	:blur_max="0.1"
	:update_interval="15"
	:extra_padding="2"
	/>

AUTONOMOUS MOVEMENT

You wish the sphere could move on its own when becoming visible?
Well my friend, wish no more! Here's how to do it:

STEP 1: Add an id and ref to the component

<WordSphere id="id_sphere_object" ref="ref_sphere_object"
      :items_list="['1', '2', '3', '4', '5', '6', '7', '8']"
      :radius="10"
      :text_color="'black'"
      :font_size_max="2"/>

STEP 2: Add this piece of script

Inside of export default within <script>

mounted(){
	window.addEventListener("scroll", this.onScroll);
},
methods: {
	onScroll(e) {
		// if the sphere becomes visible
		if (document.getElementById("id_sphere_object").getBoundingClientRect().top <= window.innerHeight){
			this.$refs.ref_sphere_object.start_autonomous_move();
			window.removeEventListener("scroll", this.onScroll);
		}
	},
}

My code is based on scroll, but you can of course do your own tweaks to activate autonomous move based on another type of event!


LICENSE

Copyright 2022 Ilan Azoulay

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Owner
Ilan Azoulay
Ilan Azoulay
A fresh install of Nuxt 2 via yarn create nuxt-app, and then following the Nuxt Bridge installation instructions

A fresh install of Nuxt 2 via yarn create nuxt-app, and then following the Nuxt Bridge installation instructions

Hex Digital 1 Oct 18, 2021
Generates a cloud out of the words.

VueWordCloud Generates a cloud out of the words. demo Try it out! setup npm npm i vuewordcloud ES module Register the component globally. import Vue f

Sergej Sintschilin 316 Dec 24, 2021
🖍 Vue component to highlight words within a larger body of text.

vue-highlight-words A simple port from react-highlight-words Vue component to highlight words within a larger body of text. demo Why? It uses render t

Yichang Liu 51 Dec 16, 2021
React component to highlight words within a larger body of text

React component to highlight words within a larger body of text. Check out a demo here. Usage To use it, just provide it with an array of search terms

Brian Vaughn 1.6k Jan 17, 2022
Operation-words - This is power of the vectors.

Wikipedia日本語版のデータから、単語をベクトル化しました。単語のもつ意味を足し引きし、どんな結果が得られるか見てみましょう。 NuxtJSを使用したWebアプリのフロントエンドです。 バックエンドはこちら ビルド方法 パッケージをインストールしておきます。 yarn あとはNuxtJSに頼っ

Denden 0 Jan 7, 2022
:star2: A Lightweight and customizable package of Emoji Picker in Vue using emojis natives (unicode).

V-Emoji-Picker This simple package using Emojis Natives Contents V-Emoji-Picker Contents Installation Usage Props Events Using custom Emojis Using cus

João Eudes Lima 301 Jan 10, 2022
The objective of this Package is the use gamepad in the project easily and get all functionality of treatment of the buttons

Package-GamePad-Controller The objective of this Package is the use gamepad in the project easily and get all functionality of treatment of the button

Reda Ennakouri 3 Nov 8, 2021
Fully automated version management and package publishing

?? ?? semantic-release Fully automated version management and package publishing semantic-release automates the whole package release workflow includi

null 14.6k Jan 24, 2022
Simple vue-virtualized package for Vue.js

vue-virtual-stream - Demo A virtualized list component for chats, comment lists and streams in general. This Vue component can be used to build large

Würth Cloud Services GmbH 16 Feb 19, 2021
Scan your vaccination, test and recovery certificates in QR code representation and save them to your Apple Wallet

This web application offers the possibility to scan the EU-wide vaccination, test and recovery certificates (namely EU Digital COVID Certificate) as Q

Philipp Trenz 134 Jan 14, 2022
A simple component that truncates your text and adds a 'Read More/Show Less' clickable.

vue-truncate-collapsed A simple Vue 2 Component that's truncate your text and adds a "Read Me/Show Less" clickable. Getting Started NPM $ npm install

Johnny Cavalcante 104 Dec 6, 2021
vue-easteregg - Easey add an easteregg to your vue app (default with konami code)

vue-easteregg ADD an easter egg to your vue app ;) <template> <div id="app"> {{ title }} <easteregg @easter="test" :eggs="eggs" duration="50

David Grill 13 Sep 17, 2021
This is a vue component, which is sliding to unlock some functionalities, such as login or sign up. This is used to protect your web app from attack.

vue-drag-verify This is a vue component, which is sliding to unlock for login or sign up. This is used to protect your web app from bot attack. demo I

Ashley Lv 191 Jan 12, 2022
Add emoji keyboard to your vuejs project

emoji-vue ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? A Vue.js project implementing a input field addon allowing to add emojis via dropdown. Install ⚙️ npm i emo

Mikhail Kuznetcov 125 Sep 17, 2021
:zap: Identify what kinda internet your users are using!

Vue Identify Network Identify the Internet Speed ⚡️ your users have. Demo Link -> Click Here This is on GitHub so let me know if I've b0rked it somewh

Vinayak Kulkarni 57 Jan 7, 2022
👋 Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an event with current selection and on creation. Good for GDPR requirements.

vue-cookie-accept-decline Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an ev

Promosis, Inc. 108 Dec 15, 2021
Vue component to add a snowfall on your page

vue-niege Let it snow on your Vue applications! Single File Vue Component for lazy snow storms generation. Come on, let's make your Vue applications j

Peter Pan 32 Oct 22, 2021
Let users control your Vue app using AI and their camera in just 1 line of HTML!

Vue Camera Gestures Let users control your Vue app using AI, their camera, and gestures of their choice in just 1 line of HTML! Demo and full document

Daniel Elkington 42 Jan 12, 2022
Matteo Bruni 2.8k Jan 15, 2022